JavaScript - przykładowe skrypty

Transkrypt

JavaScript - przykładowe skrypty
document.write
<SCRIPT>
<!-document.write("Dzień dobry");
//-->
</SCRIPT>
Skrypt na stronie www
<html>
<head>
</head>
<body>
<br>
To jest normalny dokument HTML.
<br>
<script language="JavaScript">
document.write("To jest JavaScript!")
</script>
<br>
I znowu dokument HTML.
</body>
</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
<html>
<body>
<script type="text/javascript">
var name = "Ja"
document.write(name)
document.write("<h1>"+name+"</h1>")
</script>
<p>This example declares a variable.</p>
</body>
</html>
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")
1
funkcja tekstowa
<html>
<head>
<script type="text/javascript">
function myFunction()
{
return ("Hello, have a nice day!")
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(myFunction())
</script>
<p>The function returns a text.</p>
</body>
</html>
funkcja obliczeniowa z parametrem
<html>
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(product(4,3))
</script>
<p>Funkcja zwraca wartość z dwóch parametrów 4 i 3.</p>
</body>
</html>
funkcja z wartością
<script type="text/javascript">
<!-function suma(liczba1, liczba2) {
sumaliczb=liczba1+liczba2 // dodaje liczby i przypisuje nowej zmiennej
wynik=sumaliczb
return wynik // zwraca zmienną wynik
}
a=1; b=2 // średnikiem można oddzielać wiecej poleceń w jednej linii
c=suma(a,b) // funkcja zwraca wartość, która jest podstawiana do zmiennej c
document.write("c="+c+" to samo co: "+ suma(a,b))
-->
</script>
2
funkcja z wartością modyfikacja
<script type="text/javascript">
<!-function suma(liczba1, liczba2) {
sumaliczb=liczba1+liczba2 wynik=sumaliczb
return wynik
}
a=1; b=2 c=suma(a,b)
document.write("a="+a+" b="+b+"<br />")
document.write("c="+c+" to samo co: "+ suma(a,b))
document.write("<br />A zmienna sumaliczb przechowuje: "+ sumaliczb)
-->
</script>
Alerty
1
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>18) {
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>18) {
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=="1995") {
document.write("Brawo! Masz dobrą pamięć!")
}
else {
alert("Źle!!!")
document.write("Nie zapamiętałeś dokładnie pierwszej lekcji. ")
}
3
wprowadzenie przycisku
<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("Jestem okno z komunikatem!!!")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="disp_alert()" value="Display alert box">
</form>
</body>
</html>
Przycisk i okno wprowadzania danych
<html>
<head>
<script type="text/javascript">
function disp_prompt()
{
var name=prompt("Please enter your name","")
if (name!=null && name!="")
{
document.write("Hello " + name + "! How are you today?")
}
}
</script>
</head>
<body>
<form>
<input type="button" onclick="disp_prompt()" value="Display a prompt box">
</form>
</body>
</html>
Alert z dwoma wierszami
<html>
<head>
<script type="text/javascript">
function disp_alert()
{
alert("Witaj ponownie! Tutaj został” + '\n' + "dodany nowy wiersz!")
}
</script>
</head>
<body>
<form>
<input type="button" onclick="disp_alert()" value="Display alert box">
</form>
</body>
</html>
4
Confirm
<html>
<head>
<script type="text/javascript">
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!")
}
}
</script>
</head>
<body>
<form>
<input type="button" onclick="disp_confirm()" value="Display a confirm box">
</form>
</body>
</html>
Pole tekstowe
<html>
<head>
<script language="JavaScript">
<!-function getname(str) {
alert("Hi, "+ str+"!");
}
-->
</script>
</head>
<body>
Wpisz swoje imię:
<form>
<input type="text" name="name" onBlur="getname(this.value)" value="">
</form>
</body>
</html>
5
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!!!');
}
</SCRIPT>
</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()>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type=reset value=Wyczyść>
</form>
</BODY>
</HTML>
6
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!")
}
}
</SCRIPT>
</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
Nie dotykać
<BODY>
<SCRIPT language=JavaScript>
<!-function SymError()
{
return true;
}
window.onerror = SymError;
var SymRealWinOpen = window.open;
function SymWinOpen(url, name, attributes)
{
return (new Object());
}
window.open = SymWinOpen;
//-->
</SCRIPT>
<SCRIPT>
function zdarzenie()
{
alert('Auu !');
document.f1.b1.value = "Mowiłem, żeby nie dotykać";
}
</SCRIPT>
<FORM name=f1><INPUT onclick=zdarzenie() type=button value="Nie dotykać" name=b1>
</FORM>
<SCRIPT language=JavaScript>
<!-var SymRealOnLoad;
var SymRealOnUnload;
function SymOnUnload()
{
window.open = SymWinOpen;
if(SymRealOnUnload != null)
SymRealOnUnload();
}
function SymOnLoad()
{
if(SymRealOnLoad != null)
SymRealOnLoad();
window.open = SymRealWinOpen;
SymRealOnUnload = window.onunload;
window.onunload = SymOnUnload;
}
SymRealOnLoad = window.onload;
window.onload = SymOnLoad;
//-->
</SCRIPT>
</BODY>
</HTML>
8
data modyfikacji
<html>
<body>
Ostatnia modyfikacja:
<script language="JavaScript">
document.write(document.lastModified)
</script>
</body>
</html>
dzisiejsza data
<script language="JavaScript">
today = new Date()
document.write("Teraz jest: ",today.getHours(),":",today.getMinutes())
document.write("Dzisiejsza data: ",today.getMonth()+1,"/",today.getDate(),"/",today.getYear());
</script>
Otwórz nowe okno
<HTML>
<HEAD>
<TITLE>Okno</TITLE>
<SCRIPT>
function otworz()
{
okno = window.open('nazwa.html','okno','width=1015, height=768, toolbar=no, location=no,
scrollbars=no, resizable=no, status=no fullscreen')
}
</SCRIPT>
<SCRIPT>
function zamknij()
{
window.close()
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript:otworz();">Otwórz nowe okno
<BR>
<A HREF="javascript:zamknij();">Zamknij okno
</BODY>
</HTML>
9
zdarzenia
function pushbutton
<html>
<head>
<script language="JavaScript">
function pushbutton() {
alert("Hello!");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Naciśnij mnie" onclick="pushbutton()">
</form>
</body>
</html>
Funkcja i przyciski
<html>
<head>
<script type="text/javascript">
function myfunction()
{
alert("HELLO")
}
</script>
</head>
<body>
<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>
</body>
</html>
funkcja txt
<html>
<head>
<script type="text/javascript">
function myfunction(txt)
{
alert(txt)
}
</script>
</head>
<body>
<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>
</body>
</html>
1
0
Inny przykład dwa przyciski
<html>
<head>
<script type="text/javascript">
function myfunction(txt)
{
alert(txt)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="myfunction('Good Morning!')" value="In the Morning">
<input type="button" onclick="myfunction('Good Evening!')" value="In the Evening">
</form>
</body>
</html>
Funkcja The onMouseOver
<html>
<head>
<script language="JavaScript">
function hello() {
alert("Wejdź na stronę!");
}
</script>
</head>
<body>
<a href="www.tryba.cba.pl" onMouseOver="hello()">link do mojej strony</a>
</body>
</html>
funkcja back i forward.
<html>
<body>
<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>
</body>
</html>
Możesz także napisać history.go(-1) i history.go(1).
1
1
Pętle
If
<html>
<body>
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time < 10)
{
document.write("<b>Good morning</b>")
}
else
{
document.write("<b>Good day</b>")
}
</script>
<p>
If the time on your browser is less than 10,
you will get a "Good morning" greeting.
Otherwise you will get a "Good day" greeting.
</p>
</body>
</html>
else
else
<html>
<body>
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("<b>Good morning</b>")
}
else if (time>=10 && time<16)
{
document.write("<b>Good day</b>")
}
else
{
document.write("<b>Hello World!</b>")
}
</script>
1
2
for
1
<html>
<body>
<script type="text/javascript">
for (i = 0; i <= 5; i++)
{
document.write("Numer " + i)
document.write("<br />")
}
</script>
<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>
</body>
</html>
2
<html>
<body>
<script type="text/javascript">
for (i = 1; i <= 6; i++)
{
document.write("<h" + i + ">This is header " + i)
document.write("</h" + i + ">")
}
</script>
</body>
</html>
Silnie liczb od 1 do 4
var x = 1;
for (var i = 1; i < 5; i++)
{
x = x * i;
document.write (i + "! = " + x);
}
przerwanie pętli
<html>
<body>
<script type="text/javascript">
var i=0
for (i=0; i<=10; i++)
{
if (i==3){break}
document.write("The number is " + i)
document.write("<br />")
}
</script>
<p>Pętla się zatrzyma gdy i=3.</p>
</body>
</html>
1
3
While silnie kolejnych liczb naturalnych od 1 do 4
var i = 1;
var x = 1;
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 1
litera=String.fromCharCode(kodLitery) // tworzymy litere z kodu ASCII
}
Do..while
<html>
<body>
<script type="text/javascript">
i=0
do
{
document.write("The number is " + i)
document.write("<br>")
i++
}
while (i <= 5)
</script>
</body>
</html>
1
4
Malowanie przyrostu procentowego
do {
procent=parseInt(prompt("Podaj procent zawartości (0-100):",""))
} while (procent<0 | procent>100 | 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-100
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+1;i<=100;i++) {
slupek+="|"
}
slupek+="</font>"
document.write("<br>"+ slupek +" = "+ procent +"%")
Switch
<html>
<body>
<script type="text/javascript">
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>")
}
</script>
<p>Ten JavaScript will generuje jaki dzis jest dzień. Przypisano baze danych: Sunday=0, Monday=1,
Tuesday=2, etc.</p>
</body>
</html>
1
5
tablice
<html>
<body>
<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
</script>
</body>
</html>
Data
<script type="text/javascript">
DayName = new Array(7)
DayName[0] = "niedziela "
DayName[1] = "poniedziałek "
DayName[2] = "wtorek "
DayName[3] = "środa "
DayName[4] = "czwartek "
DayName[5] = "piątek "
DayName[6] = "sobota "
MonthName = new Array(12)
MonthName[0] = " I "
MonthName[1] = " 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[10] = " XI "
MonthName[11] = " 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())
</script>
1
6
formularze
1
<html>
<head>
<script language="JavaScript">
function getname(imie) {
alert("Hi, "+ imie+"!"); }
</script>
</head>
<body>
Wpisz swoje imię i kliknij myszką:
<form>
<input type="text" name="name" onBlur="getname(this.value)" value="">
</form>
</body>
</html>
sprawdzanie poprawności adresu
<html>
<head>
<script language="JavaScript">
function test1(form) {
if (form.text1.value == "")
alert("Podaj ciąg znaków!")
else {
alert("Cześć "+form.text1.value+"! Informacja poprawna!");
}
}
function test2(form) {
if (form.text2.value == "" ||
form.text2.value.indexOf('@', 0) == -1)
alert("Niepoprawny adres poczty elektronicznej!");
else alert("OK!");
}
</script>
</head>
<body>
<form name="first">
Wpisz swoje nazwisko:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="Test" onClick="test1(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)">
</body>
</html>
1
7
2 przyciski wyboru
<BODY>
<FORM name=f1>
<SELECT name=miesiac>
<OPTION value=1 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=10>Październik</OPTION>
<OPTION value=11>Listopad</OPTION>
<OPTION value=12>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>2010</OPTION>
<OPTION value=2007>2011</OPTION>
<OPTION value=2004>2012</OPTION>
<OPTION value=2005>2013</OPTION>
<OPTION value=2006>2014</OPTION>
</SELECT>
</FORM>
</BODY>
1
8
Wybór płci
<html>
<head>
<script type="text/javascript">
function mr(dis,en){
document.getElementById(dis).style.visibility='visible';
document.getElementById(en).style.visibility='hidden';
}
</script>
</head>
<body>
<input name="rad" type="radio" value="mężczyzna" onclick="mr('s1','s2') " />
<select id="s1" onchange="">
<option value="1">kawaler</option>
<option value="2">żonaty</option>
<option value="3">wdowiec</option>
</select>
<input name="rad" type="radio" value="kobieta" onclick="mr('s2','s1')" />
<select id="s2" onchange="">
<option value="4">panna</option>
<option value="5">mężatka</option>
<option value="6">wdowa</option>
</select>
</body>
</html>
1
9
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(1);
var m = d.getMonth()
d.setDate( 1 - 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() + 1 )
}
document.write("</tr>");
} while (d.getMonth() == m)
</SCRIPT>
</TBODY></TABLE>
</BODY>
2
0
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 6.00.2900.2912" 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>
<!-function SymError()
{
return true;
}
window.onerror = SymError;
var SymRealWinOpen = window.open;
function SymWinOpen(url, name, attributes)
{
return (new Object());
}
window.open = SymWinOpen;
//-->
</SCRIPT>
<SCRIPT>
var d = new Date();
d.setDate(1);
var m = d.getMonth()
d.setDate( 1 - 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() + 1 )
}
document.write("</tr>");
2
1
} while (d.getMonth() == m)
</SCRIPT>
</TBODY></TABLE>
<SCRIPT language=JavaScript>
<!-var SymRealOnLoad;
var SymRealOnUnload;
function SymOnUnload()
{
window.open = SymWinOpen;
if(SymRealOnUnload != null)
SymRealOnUnload();
}
function SymOnLoad()
{
if(SymRealOnLoad != null)
SymRealOnLoad();
window.open = SymRealWinOpen;
SymRealOnUnload = window.onunload;
window.onunload = SymOnUnload;
}
SymRealOnLoad = window.onload;
window.onload = SymOnLoad;
//-->
</SCRIPT>
</BODY>
2
2
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 6.00.2900.2912" 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>
<!-function SymError()
{
return true;
}
window.onerror = SymError;
var SymRealWinOpen = window.open;
function SymWinOpen(url, name, attributes)
{
return (new Object());
}
window.open = SymWinOpen;
//-->
</SCRIPT>
2
3
<SCRIPT>
var d = new Date();
d.setDate(1);
var m = d.getMonth()
d.setDate( 1 - 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() + 1 )
}
document.write("</tr>");
} while (d.getMonth() == m)
</SCRIPT>
</TBODY></TABLE>
<SCRIPT language=JavaScript>
<!-var SymRealOnLoad;
var SymRealOnUnload;
function SymOnUnload()
{
window.open = SymWinOpen;
if(SymRealOnUnload != null)
SymRealOnUnload();
}
function SymOnLoad()
{
if(SymRealOnLoad != null)
SymRealOnLoad();
window.open = SymRealWinOpen;
SymRealOnUnload = window.onunload;
window.onunload = SymOnUnload;
}
SymRealOnLoad = window.onload;
window.onload = SymOnLoad;
//-->
</SCRIPT>
</BODY>
2
4
Zegar
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2">
<STYLE>
.details
{
font-family
: lucida sans unicode, verdana, century gothic, arial;
font-size
: 10;
font-weight
: normal;
color
: #ffffff;
background-color
: #000000;
}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!-function curTime()
{
var now=new Date()
var hrs=now.getHours()
var min=now.getMinutes()
var sec=now.getSeconds()
var don="AM"
if (hrs>=12){ don="PM" }
if (hrs>12) { hrs-=12 }
if (hrs==0) { hrs=12 }
if (hrs<10) { hrs="0"+hrs }
if (min<10) { min="0"+min }
if (sec<10) { sec="0"+sec }
clock.innerHTML=hrs+":"+min+":"+sec+" "+don
setTimeout("curTime()",1000)
}
-->
</SCRIPT>
</HEAD>
<BODY onLoad=curTime()>
<SPAN CLASS=details ID=clock STYLE="position:relative;"></SPAN>
</BODY>
2
5
Matematyka
<script type="text/javascript">
<!-var imie="Teresa" // zmienna typu string
var wiek=20 // zmienna typu integer
var mezczyzni=22
var kobiety=27
if (mezczyzni>kobiety) co="większość"
if (mezczyzni<kobiety) co="mniejszość"
if (mezczyzni==kobiety) co="połowę"
procent=mezczyzni/(mezczyzni+kobiety)
document.write("Nasza Pani ma na imię "+imie+". ")
document.write(imie+" ma prawie "+wiek+" lat.<br />")
document.write("Razem z pozostałymi "+ mezczyzni +" mężczyznami stanowi "+ procent +"
procentową "+ co +" mężczyzn.<br />")
-->
</script>
Tabliczka mnożenia
<html>
<head>
<script type="text/javascript">
function tabliczka() {
document.write("<table border=\"1\">");
for (i=1; i<=10; i++)
{
document.write("<tr><td>" + i + "</td>");
for (j=1; j<=10; j++)
{
if (j != 1) {
document.write("<td>" + i*j + "</td>");
}
}
document.write("</tr>");
}
document.write("</table>");
}
</script>
</head>
<body>
<script>tabliczka();</script>
</body>
</html>
2
6
Code
\'
\"
\&
\\
\n
\r
\t
\b
\f
Outputs
single quote
double quote
ampersand
backslash
new line
carriage return
tab
backspace
form feed
onerror
<html>
<head>
<script type="text/javascript">
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!")
}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()" />
</body>
</html>
2
7
6. Tworzenie okien
Oto źródło:
<html>
<head>
<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><h1><B>To jest naprawdę fajne!
</B></h1></CENTER>");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Naciśnij mnie" onclick="WinOpen()">
</form>
</body>
</html>
. 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