ex1.htm
|
Gdzie i jak umieścić skrypt Java Script - przykład 1 (wskazanie odpowiednich lokalizacji).
Pokaż kod PHP
Plik: "ex1.htm"
<html>
<head>
<title>Java Script</title>
<script type="text/javascript">
<!--
tresc skryptu, która bedzie pominieta przez
przegladarke nie obsługujaca Java Script-u
//-->
</script>
<noscript>
Treść skryptu wyświetlona, gdy przeglądarka nie obsługuje Java Script-u.
</noscript>
</head>
<body>
</body>
</html>
Zwiń
|
|
ex2.htm
|
Gdzie i jak umieścić skrypt Java Script - kontynuacja poprzedniego przykładu z działającym kodem.
Pokaż kod PHP
Plik: "ex2.htm"
<html>
<head>
<title>Java Script</title>
<script type="text/javascript">
<!--
document.write("Witaj Swiecie Java Script!");
//-->
</script>
<noscript>
<b>Witaj Świecie bez Java Script!</b>
</noscript>
</head>
<body>
</body>
</html>
Zwiń
|
|
ex3.htm
|
Pobieranie treści skryptu z pliku zewnętrznego.
Pokaż kod PHP
Plik: "ex3.htm"
<html>
<head>
<title>Java Script</title>
<script type="text/javascript" src="js1.js"></script>
</head>
<body>
</body>
</html>
Zwiń
Pokaż kod PHP pliku pomocniczego js1.js
Plik: "js1.js"
document.write("Witaj Swiecie!");
Zwiń
|
|
ex5.htm
|
Deklaracja zmiennych. Przypisywanie do jednej zmiennej wartości różnych typów.
Pokaż kod PHP
Plik: "ex5.htm"
<html>
<head>
<title>Java Script</title>
<script type="text/javascript">
<!--
var zmienna="Pewien napis";
document.write("wartość zmiennej: "+zmienna);
document.write("<br />");
zmienna=12.34;
document.write("wartość zmiennej: "+zmienna);
//-->
</script>
</head>
<body>
</body>
</html>
Zwiń
|
|
ex7.htm
|
Użycie funkcji.
Pokaż kod PHP
Plik: "ex7.htm"
<html>
<head>
<title>Java Script</title>
<script type="text/javascript">
<!--
function Wypisz(tekst)
{
document.write(tekst);
}
function NL()
{
document.write("<br>");
}
Wypisz("Napis 1");
Wypisz("Napis 2");
NL();
Wypisz("Napis 3");
//-->
</script>
</head>
<body>
</body>
</html>
Zwiń
|
|
ex12.htm
|
Użycie tablicy.
Pokaż kod PHP
Plik: "ex12.htm"
<html>
<head>
<title>Java Script</title>
<script type="text/javascript">
<!--
var imiona = new Array("Rafał","Agnieszka","Tomek","Michał","Ola");
for(i=0;i<5;i++)
document.write(imiona[i]+"<br>");
//-->
</script>
</head>
<body>
</body>
</html>
Zwiń
|
|
ex13.htm
|
Użycie okienka prompt i konieczność stosowania funkcji parseInt.
Pokaż kod PHP
Plik: "ex13.htm"
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Java Script</title>
<script type="text/javascript">
<!--
function min(a,b)
{
if(a<b)
return a;
else
return b;
}
x=prompt("Podaj pierwszą liczbę","");
y=prompt("Podaj drugą liczbę","");
z=min(parseInt(x),parseInt(y));
document.write("Mniejszą z liczb "+x+" oraz "+y+" jest "+z);
//-->
</script>
</head>
<body>
</body>
</html>
Zwiń
|
|
ex14.htm
|
Obsługa zdarzeń na przykładzie zdarzenia onClick i konieczność stosowania funkcji parseInt.
Pokaż kod PHP
Plik: "ex14.htm"
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Java Script</title>
<script type="text/javascript">
<!--
function wypisz(co)
{
alert(co);
}
//-->
</script>
</head>
<body>
<form>
<input type="button" value="Napis 1" onClick="wypisz('To jest tekst 1');"><br />
<input type="button" value="Napis 2" onClick="wypisz('To jest tekst 2');"><br />
<input type="button" value="Napis 3" onClick="wypisz('To jest tekst 3');">
</body>
</html>
Zwiń
|
|
ex15_1.htm
|
Dostęp z poziomu skryptu do elementów formularza.
Pokaż kod
Plik: "ex15_1.htm"
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Java Script</title>
<script type="text/javascript">
<!--
function wypisz1()
{
alert(formularzyk.poletko.value);
}
function wypisz2(form)
{
alert(form.poletko.value);
}
//-->
</script>
</head>
<body>
<form name="formularzyk">
Wpisz jakiś tekst:
<input type="text" name="poletko"><br />
a następnie naciśnij przycisk
<input type="button" value="To działa" onClick="wypisz1()"><br />
lub przycisk
<input type="button" value="To działa" onClick="wypisz2(this.form)">
</form>
</body>
</html>
Zwiń
Pokaż kod (plik ex15_2.htm) w przypadku gdy skrypt jest w pliku zewnętrznym (ex15_2.js)
Plik: "ex15_2.htm"
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Java Script</title>
<script type="text/javascript" src="js15_2.js"></script>
</head>
<body>
<form name="formularzyk">
Wpisz jakiś tekst:
<input type="text" name="poletko"><br />
a następnie naciśnij przycisk
<input type="button" value="To czasem nie działa" onClick="wypisz1()"><br />
lub przycisk
<input type="button" value="To działa" onClick="wypisz2(this.form)">
</form>
</body>
</html>
Zwiń
Przetestuj działanie
Pokaż kod pliku pomocniczego js15_2.js
Plik: "js15_2.js"
function wypisz1()
{
alert(formularzyk.poletko.value);
}
function wypisz2(form)
{
alert(form.poletko.value);
}
Zwiń
|
|
ex16.htm
|
Tekst jako obiekt i przykładowe operacje jakie można na nim wykonać.
Pokaż kod
Plik: "ex16.htm"
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Java Script</title>
<script type="text/javascript">
<!--
document.write("Kilka przykładzików: <br />");
document.write(" bold ".bold() + " italics ".italics() + " strike ".strike());
document.write(" sub ".sub() + " sup ".sup() + " big ".big() + " small <br />".small());
document.write(" big, big <br />".big().big());
document.write(" czerwony ".fontcolor("red"), " zielony <br />".fontcolor("green"));
document.write(" czcionka 5 ".fontsize(5));
document.write(" czcionka 10 ".fontsize(10));
document.write(" czcionka 15 ".fontsize(15));
document.write(" czcionka 20 ".fontsize(20));
//-->
</script>
</head>
<body>
</body>
</html>
Zwiń
|
|
ex17.htm
|
Pobieranie bierzącego czasu.
Pokaż kod
Plik: "ex17.htm"
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Java Script</title>
<script type="text/javascript">
<!--
var data=new Date();
document.write("Dzisiaj jest " + data.getDate() + " " + data.getMonth() + " " + data.getFullYear() + "<br />");
document.write(data.getHours()+":"+data.getMinutes()+":"+data.getSeconds());
//-->
</script>
</head>
<body>
</body>
</html>
Zwiń
|
|
ex18.htm
|
Podmienianie obrazków.
Pokaż kod
Plik: "ex18.htm"
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Java Script</title>
<script type="text/javascript">
<!--
var imgsrc = new Array();
imgsrc[0]="smutek.jpg";
imgsrc[1]="usmiech.jpg";
ktory=0;
function zmien()
{
if(ktory == 1)
ktory=0;
else
ktory=1;
document.images[0].src=imgsrc[ktory];
}
//-->
</script>
</head>
<body>
<img src="smutek.jpg" onMouseOver="zmien()" OnMouseOut="zmien()" border=0>
</body>
</html>
Zwiń
Plik pomocniczy smutek.jpg
Plik pomocniczy usmiech.jpg
|
|
ex19.htm
|
Zegarek.
Pokaż kod
Plik: "ex19.htm"
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Java Script</title>
<script type="text/javascript">
<!--
var czas;
var m; //minuty
var s; //sekundy
var h; //godziny
imgsrc = new Array();
imgsrc[0]="0.jpg";
imgsrc[1]="1.jpg";
imgsrc[2]="2.jpg";
imgsrc[3]="3.jpg";
imgsrc[4]="4.jpg";
imgsrc[5]="5.jpg";
imgsrc[6]="6.jpg";
imgsrc[7]="7.jpg";
imgsrc[8]="8.jpg";
imgsrc[9]="9.jpg";
function odmierz()
{
czas = new Date();
m=czas.getMinutes();
s=czas.getSeconds();
h=czas.getHours();
document.images[0].src=imgsrc[(h-h%10)/10];
document.images[1].src=imgsrc[h%10];
document.images[2].src=imgsrc[(m-m%10)/10];
document.images[3].src=imgsrc[m%10];
document.images[4].src=imgsrc[(s-s%10)/10];
document.images[5].src=imgsrc[s%10];
setTimeout("odmierz()",1000);
}
//-->
</script>
</head>
<body onLoad="odmierz()">
<img src="0.gif" border=0>
<img src="0.gif" border=0>
<img src="0.gif" border=0>
<img src="0.gif" border=0>
<img src="0.gif" border=0>
<img src="0.gif" border=0>
</body>
</html>
Zwiń
Pliki pomocnicze z cyframi:
0
1
2
3
4
5
6
7
8
9
|
|