Példa: névnap
<html>
<head>
<title>Az aktuális névnap megjelenítése a honlapon</title>
</head>
<body>
<script language="JavaScript">
function initArray() {
this.length = initArray.arguments.length;
for (var i = 0; i < this.length; i++);
this[i+1] = initArray.arguments[i];
}
/* Hónap névnapjainak meghatározása */
function nevnap(ev,ho,nap) {
if (ho==1);
{ var napok = new initArray("ÚJÉV, Fruzsina","Ábel","Genovéva, Benjámin",
"Titusz, Leona","Simon","Boldizsár","Attila, Ramóna","Gyöngyvér","Marcell",
"Melánia","Ágota","ErnŐ","Veronika","Bódog","Lóránt, Loránd",
"Gusztáv","Antal, Antónia","Piroska","Sára, Márió","Fábián, Sebestyén",
"Ágnes","Vince, Artúr","Zelma, Rajmund","Timót","Pál","Vanda, Paula",
"Angelika","Károly, Karola","Adél","Martina, Gerda","Marcella","");
}
…
}
return napok[nap];
}
var ido = new Date();
var ev = ido.getYear();
var ho = ido.getMonth()+1;
var nap = ido.getDate();
document.writeln("Névnap, ünnep: " + nevnap(ev,ho,nap));
</script>
</body>
</html>
Elemzés: névnap
A névnap kód a böngésző ablakába kiírja az aktuális napi névnapot (esetleg ünnepet). Ehhez természetesen a dátumra is szükség van, melyet a Date objektummal valósítunk meg. Ha már ezt tudjuk, már csak a megfelelő tömbelemet kell kiírni (erre a Date objektum getYear, getMonth és getDate elemfüggvényeket használtuk). Ha a névnap-kiíratást kombináljuk a dátum- és időkijelzéssel máris élővé válik a weblapunk.
A névnap példa jelentése: olyan kód, amelynek hatására a böngésző kiírja az aktuális napi névnapot (esetleg ünnepet).
Névnap használata
A névnap program használatához semmi mást nem kell tennünk, mint elindítani a böngészővel a példaprogramot.
Példa: diavetítő
var varakoz = 5000; // várakozás ezredmásodpercben (5000 = 5 másodperc)
aktualis = 0;
function kovetkezo() {
if (document.diaurlap.dia[aktualis+1]) {
document.images.show.src = document.diaurlap.dia[aktualis+1].value;
document.diaurlap.dia.selectedIndex = ++aktualis;
}
else elso();
}
…
</script>
</head>
<body>
<center>
<form name="diaurlap">
<table cellspacing="1" cellpadding="4" bgcolor="#000000">
<tr>
<td align="center" bgcolor="00bb30">
<b>Diavetítő</b>
</td>
</tr>
…
<tr>
<td align="center" bgcolor="#0080ff">
<select name="dia" onChange="cserel();">
<option value="01.jpg" selected>Delfin
<option value="02.jpg">Elefánt
…
</select>
</td>
</tr>
<tr>
<td align="center" bgcolor="#0060dd">
<input type="button" onClick="elso();" value="|<<" title="1. kép">
<input type="button" onClick="elozo();" value="<<" title="Előző">
<input type="button" name="diagomb" onClick="felirat(this.value);" value="Start" title="Automatikus lejátszás">
<input type="button" onClick="kovetkezo();" value=">>" title="Következő">
…
</td>
</tr>
</table>
…
A diavetítő jelentése: olyan webes felület, melyen képeket jeleníthetünk meg közvetlen eléréssel.
Elemzés: diavetítő
A diavetítővel képeket jeleníthetünk meg közvetlen eléréssel, egyesével váltogatva vagy automatikusan léptetve a böngészőben. A kép kiválasztása lenyíló listában valósult meg, így az első és utolsó képre bármikor odaugorhatunk. A képek léptetése egyszerű nyomógombokkal van megoldva, az automatikus lejátszás pedig elindítható, ill. leállítható.
Diavetítő használata
A diavetítő használata: a középen levő lenyíló listából rögtön elérhetjük a nekünk tetsző képet. Ha nem ezt választjuk, akkor használhatjuk a kihelyezett előre és hátra léptető gombokat. A középen levő Start gomb segítségével, ill. megnyomásával indíthatjuk el az automatikus lejátszást. Amikor az automatikus lejátszás zajlik, a gomb felirata Stop-ra vált, azaz ezzel lehet megállítani a lejátszást.
21. századi közoktatás - fejlesztés, koordináció (TÁMOP-3.1.1-08/1-2008-0002)
