JavaScript tanfolyam

4. rész


ÖRÖKNAPTÁR

Válassz évet, egy hónapot és egy napot:

Év: 19. Hónap: Nap:

A hét megfelelő napja:


Leckénk célja, hogy az itt látható öröknaptár fabrikálásának titkát megtudjuk.

Egy űrlapot hozunk létre, melynek első mezőjében jelenik meg az év, a második és harmadik mezőben a megfelelő hónap és nap, a negyedikben pedig a megfelelő napot nézhetjük meg.

A fejlécben (head) három függvényt definiáltunk.

<head>
<script LANGUAGE="JavaScript">

function NapFuggveny(szam) {

if (szam == 0) {return "vasárnap"}         
if (szam == 1) {return "hétfö"}         
if (szam == 2) {return "kedd"}         
if (szam == 3) {return "szerda"}         
if (szam == 4) {return "csütörtök"}         
if (szam == 5) {return "péntek"}         
if (szam == 6) {return "szombat"}         
 }

function MaiNap() {
          var ido = new Date()

          Ev = datum.getYear()
          Ho = datum.getMonth()
          Nap = datum.getDate()-1
          Hetnap = datum.getDay() 

          document.ValasztoUrlap.EvValasztas.value =Ev
          document.ValasztoUrlap.HonapValasztas.selectedIndex = Ho
          document.ValasztoUrlap.NapValasztas.selectedIndex = Nap
          document.ValasztoUrlap.HetNapja.value  = NapFuggveny(Hetnap)
 }

function OrokNaptar() {
          var ujdatum = new Date()

          ujdatum.setYear(document.ValasztoUrlap.EvValasztas.value) 
          ujdatum.setMonth(document.ValasztoUrlap.HonapValasztas.selectedIndex) 
          ujdatum.setDate(document.ValasztoUrlap.NapValasztas.selectedIndex+1) 
          document.ValasztoUrlap.HetNapja.value = NapFuggveny(ujdatum.getDay())
 }

</script>
</head>

Űrlapunk pedig így fest:

<B>Válassz évet, egy hónapot és egy napot: </B> 
<FORM NAME="ValasztoUrlap">
Év: 19<INPUT TYPE="text" NAME="EvValasztas" SIZE=2 >.
Hónap: <SELECT NAME="HonapValasztas"   onChange="OrokNaptar()">
<OPTION>január <OPTION>február<OPTION>március<OPTION>április
<OPTION>május<OPTION>június<OPTION>július<OPTION>augusztus
<OPTION>szeptember<OPTION>október<OPTION>november
<OPTION>december
</SELECT>

Nap: <SELECT NAME="NapValasztas"  onChange="OrokNaptar()">
<OPTION>1<OPTION>2<OPTION>3<OPTION>4
<OPTION>5<OPTION>6<OPTION>7<OPTION>8
<OPTION>9<OPTION>10<OPTION>11<OPTION>12
<OPTION>13<OPTION>14<OPTION>15<OPTION>16 
<OPTION>17<OPTION>18<OPTION>19<OPTION>20
<OPTION>21<OPTION>22<OPTION>23<OPTION>24 
<OPTION>25<OPTION>26<OPTION>27<OPTION>28
<OPTION>29<OPTION>30<OPTION>31
</SELECT>
<p>

<b>A hét megfelelo napja:</b> <INPUT TYPE="text" NAME="HetNapja" SIZE=9>

</FORM>

Vizsgáljuk meg, hogyan működnek a fenti formulák!
A MaiNap() függvénnyel érdemes kezdeni. Az datum változó a gépünk által szolgáltatott dátumot veszi fel értékül. A datum objektum getYear() paramétere az év utolsó két jegyéből alkotott számot, a getMonth() a hónap sorszámát (Január=0,...,), a getDate() a napot, getDay() a hét megfelelő napjának sorszámát, (vasárnap=0,...,). Ezt a NapFuggeny() is sugallja, amely az adott sorszámokhoz a napok magyar neveit rendeli.

Az űrlap input mezőinek értékét a value, a legördülő menü kiválasztott elemének sorszámát (0,...) az selectedIndex paraméter mondja meg.

Az onChange=... azt mondja meg, milyen függvényt hívjon meg a böngésző, amikor megváltoztatjuk a gördülőmenű állapotát. Esetünkben az OrokNaptar() elnevezésű függvényt hívja meg, amely kiszámolja a kívánt napot.

Innen folytatjuk...