Rendezés ütközésmentesítő algoritmussal Delpiben

         Az ütközésmentesítő algoritmus már több feladat kapcsán bizonyította hatékonyságát. Ezen a lapon arra keresem a választ, vajon rendezésre alkalmas-e ez az algoritmus. A tesztek azt mutatják, hogy igen, a véletlen választás alkalmas a rendezettség elérésére.

Nem egy gyors rendezési eljárást ad, de azért elfogatható időn belül befejezi a rendezést. Az időtényező az 1000-es elemszám fölött szokott kritikus lenni minden rendező eljárásnál. Ezzel a programmal 5000 elemig rendezhetünk. Minden százezredik lépés után frissül a képernyő, mely a megfelelő sebességet is biztosítja. A maximális lépésszám tízmillió. A program méri és kijelzi az időt. Ha sikeres rendezéssel áll le a program, akkor azt egy Kész felirat jelzi. Ha nem sikerült rendezni a számokat, akkor a felirat szövege: Vége.

unit UUtkRend;

interface

uses
  Windows, Messages, SysUtils, Variants, Classes, 

  Graphics, Controls, Forms, Dialogs, StdCtrls;

Const Max=5000;

type
  TfmUtkRend = class(TForm)
    lbUtkRend: TLabel;
    ldUtkRend: TListBox;
    btKilepes: TButton;
    btRendez: TButton;
    edMenet: TEdit;
    edHiba: TEdit;
    btKever: TButton;
    edSzam: TEdit;
    edStart: TEdit;
    edStop: TEdit;
    lbKesz: TLabel;
    Procedure Kever;
    Function Hiba(A: Word): LongInt;
    procedure btKilepesClick(Sender: TObject);
    procedure FormCreate(Sender: TObject);
    procedure btRendezClick(Sender: TObject);
    procedure btKeverClick(Sender: TObject);
    procedure edSzamChange(Sender: TObject);
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  fmUtkRend: TfmUtkRend;
  T: Array[0..Max] Of Word;
  Szam: Word;

implementation

{$R *.dfm}

procedure TfmUtkRend.btKilepesClick(Sender: TObject);
begin
  Close;
end;

procedure TfmUtkRend.FormCreate(Sender: TObject);
begin
  Szam:= 1000; Randomize; Kever;
end;

procedure TfmUtkRend.edSzamChange(Sender: TObject);
Var Kod: Integer;
begin
  Val(edSzam.Text,Szam,Kod);
end;

Procedure TfmUtkRend.Kever;
Var I, A, B, P: Word;
Begin
  For I:= 0 To Szam Do T[I]:= I;
  For I:= 0 To 10*Szam Do
  Begin
    A:= Random(Szam+1); B:= Random(Szam+1); P:= T[A]; T[A]:= T[B]; T[B]:= P;
  End;
  With ldUtkRend Do
  Begin Clear;  For I:= 0 To Szam Do Items.Add(IntToStr(T[I])) End;
End;

procedure TfmUtkRend.btKeverClick(Sender: TObject);
begin
  Kever; edMenet.Text:= '0'; edHiba.Text:= '0';
  edStart.Text:= ''; edStop.Text:= ''; lbKesz.Visible:= True;
end;

Function TfmUtkRend.Hiba(A: Word): LongInt;
Var I: Word;
    N: LongInt;
Begin
  N:= 0;
  For I:= 0 To Szam Do
  Begin
    If (I<A) And (T[I]>T[A]) Then Inc(N);
    If (I>A) And (T[I]<T[A]) Then Inc(N);
  End;
  Hiba:= N;
End;

procedure TfmUtkRend.btRendezClick(Sender: TObject);
Var I, A, B, P, H, H2: LongInt;
    Menet: LongInt;
    Van: Boolean;
begin
  edStart.Text:= TimeToStr(GetTime); edStart.Repaint;
  edStop.Text:= ''; edStop.Repaint;
  With lbKesz Do Begin Caption:= '        '; Repaint End;
  H:= 0; Menet:= 0; Van:= False;
  For I:= 0 To Szam-1 Do If T[I+1]<T[I] Then Begin Van:= True; Break End;
  While Van And (Menet<10000000) Do
  Begin
    Van:= False; Inc(Menet);
    A:= 0; While T[A+1]>T[A] Do A:= Random(Szam); B:= Random(Szam+1);
    H:= Hiba(A)+Hiba(B); P:= T[A]; T[A]:= T[B]; T[B]:= P; H2:= Hiba(A)+Hiba(B);
    If H2>H Then
    Begin P:= T[B]; T[B]:= T[A]; T[A]:= P; H:= Hiba(A)+Hiba(B) End Else H:= H2;
    If Menet Mod 100000=0 Then
    With ldUtkRend Do
    Begin
      Clear; For I:= 0 To Szam Do Items.Add(IntToStr(T[I])); RePaint;
      edMenet.Text:= IntToStr(Menet); edMenet.Repaint;
      edHiba.Text:= IntToStr(H); edHiba.Repaint;
    End;
    For I:= 0 To Szam-1 Do If T[I+1]<T[I] Then Begin Van:= True; Break End;
  End;
  With ldUtkRend Do
  Begin Clear; For I:= 0 To Szam Do Items.Add(IntToStr(T[I])) End;
  edMenet.Text:= IntToStr(Menet);
  edHiba.Text:= IntToStr(H);
  edStop.Text:= TimeToStr(GetTime);
  With lbKesz Do If Not Van Then
  Caption:= 'Kész' Else Caption:= 'Vége';
  lbKesz.Visible:= True;
end;

end.

Zongoralecke hatéveseknek

Csak mesélek…4.

Egyszer a szülőfalumba mentem a szüleim sírját látogattam meg a temetőben. Éppen ebédidő volt a helyi virágbolt majd csak fél óra múlva nyitott ki, ezért a falu közepén a fagyozóba mentem, hogy jobban teljen az idő. a padon ülve megláttam egy rongyos ruhájú 11 éves jól láthatóan unatkozó kicsit koszos gyereket. Vettem egy fagyit, megkérdeztem tőle kér-e ő is, azt felelte aha. Leültem mellé és arra kértem meséljen valamit magáról a fagyiért cserébe. A fiúcska miután megkapta a fagyit kicsit vonakodva bár, de bólintott     - Hogy hívnak?
         - Mint apámat!
         - Apádat hogy hívják?
         - Mint nagyapámat!
         - Él még a nagyapád?
         - Ammán meghótt!
         - Mesélj róla valamit.
Ű csuda okos ember vót, mindenkinek meg tudott felelni, senkinek sem maradt adósa. Egyszer egy helós, (mert hogy a házalókat helósnak híjták) bekiáltott az udvarunkba, nagyapám éppen kapálta a komprét. Naccságosúr! - meseszép kuffert árulok vegyen tűlem. (A kuffer az utazóbőrönd). Oszt ugyan minek az neköm he? – Hát ugyi, ha hómap vonatra száll uraságod, ebbe bérakhatja a culáját ( ruháit)! Az öreg megpederte a kackiás bajuszát és azt mondta; Jaj de bolond kend, elősször is, itt nincs vasutállomás a faluba, másoccor meg ott üljek pucéron a vonatra várva. A helós megemelte a kalapját oszt gyorsan kissé megszeppenve lógó orral tovább állt, az öreg meg tovább kapálta a tengerit. Egy alkalommal a szomszéd köszönt át a kerítésen nagyapámnak, adj Isten Gyula! Neked is Józsi. Kólikás még a lovad a ráró? Már nem. Csend. Hanem te Gyula, te mit adtál a lunak amikor kólikás vót? Hát ugyi kapot egy vider hideg vízbe korpát meg melaszt. Azt az áldóját, rohant a szomszéd ű is adott a lunak. Estére jön a szomszéd ríva a kerítéshöz, hát megdöglött a rigó, pedig úgy ahogy mondtad adtam neki korpát meg melaszt.
      -Oszt mégis megdüglött?
   -     Meg bíz.
 Ne bánkódj szomszid az enyim is így járt két napja. Emiatt egy évig nem beszéltek egymással. Nagyapám egyik este, miután megetette a jószágot, jött be a házba, igen fáradt vót mán, hát a fótos nadrág szára kicsit nedves vót neki, mire megjegyezte nagymamám hogy;  - na esik? Nem - fúj.
Ezzel a beszélgetés be vót fejezve. Lábat mostak, oszt lefeküdtek.
      - Vallásos ember volt a nagyapád?
Nagyapa nagyon vallásos ember vót. Minden este imádkozott elalvás előtt, nagymama meg csak hallgatta mit mond. Mert hogy a nagymama nem vót olyan vallásos. Egyszer azt monta a nagymama, hogy; Apjok! nem tudok aludni, naná az ördög sose alszik. Mindenkiért imádkozott kend csak engöm nem foglalt bele az imába, miért? Ejnye na asszony, hát már hogyne foglalnálak bele hallhattad éppen az előbb imádkoztam, hogy  Istenem szabadíts meg a gonosztól!  Ja, az más, azzal elaludtak.
- Járt templomba is?
Járt biza, nem hiányzott biz ő egy misérül se. Hanem egyik vasárnap a mise után nagyapának nagyon kölött vizelni, hát a sekrestye megé ment, oda szaladt ki a fiatal esperes is, már az sem bírta. Ránéz az öreg a plebános szerszámjára, oszt látja hogy az nagyobb.
      -Tisztelendő atyám, nem cserélünk szerszámot?
      - Jaj Gyula bácsi, miért akar maga cserélni?
     -  Mert maga az enyémmel még tudna misézni, meg keresztelni, de nekem meg jó vóna a magáé másra is.
   -     Na ilyeneket ne mesélj, valami mást. Mellesleg akkor Gyula a neved?
   -     Igen.
   -     Mit csinált nagyapád egésznap?
Dógozni má nem igen bírt, így a kapuban vót egy pad, nagyapa odaült ki minden este pipázni, gyakran én gyújtottam meg a tajtékpipáját, meg vót egy pipapiszkáló, azzal lazitottam fel benne a dohánt. Mivel vót szőlője, hát vót bora is, szeretett a pohár fenekére nézni, nagymamám egyszer azt mondta hogy, fiatabb korában inkább a lyányok fenekíre. Nagymama gyakran letorkolta érte, ha többet ivott. Egyszer a kocsmába ment érte a nagymama és hazafelé menet folyamatosan mosta a fejét. Minek kell neked a korcsmába menni? Hát egyedül igyak? Az öregnek felfordult a gyomrában a pálesz és visszajött, pont a nagymama otthonkájára. Hogy nézel ki részeg disznó, mondta. Én asszon? Hát nézd meg magad.
Egyik nap jönnek a tehenek a csordábúl haza, megáll a tehenünk a kapu előtt, oszt bőgött egyet, erre én kinyitottam neki a kaput, az meg komótosan besétált és szokása szerint egyenesen a gémeskúthoz ment a vizes vályúhoz. Húztam fel neki friss vizet, amikor befejezte az ivást, mondta nagymama neki: látod-e te embör, ez csak egy marha, oszt mégis tudja mi az elég! Erre nagyapa csak annyit motyogott a bajusza alatt: vízbűl én is tudnám! Külömben is látod, az ökör iszik magába, az embör korcsmába jár.
 Egyik este szedjük nagyapával az érett barackot a kertben kérdeztem tűle hogy mi lesz ebbül? Hát ha nagyanyád nem veszi észre akkor pálinka, oszt ha észre veszi? hát akkor lekvár. Valamék este későn értem a nagyapámék házához, már aludtak, mert az öregek korán lefekszenek a tyukkal, hogy korán kelhessenek a kakassal. Finoman megkopogtattam az ajtót, de senki nem felelt. Erősebben dörömböltem, gondolva hogy biztosan alszanak azért nem hallják a kopogásomat. Nagyapa gyertyát gyújtott az ajtóhoz csoszogott, és megkérdezte; Ki a ? Na gondoltam megviccelem, beszóltam mély földöntúli hangon; A ramocsaházi asszongyíkos! Ja akkor jóvan mondta, bekiáltott nagymamának; Asszon! Téged keresnek. Azzal visszafeküdt a helyire.
Egyszer menni akartak a szüretibálra, de a mama nehezen tudott elkészülni. Nagyapa tátizza(bámulja) ahogy nagymama meddig páváskodik még a tükör előtt, elégedetlenül csóválja a fejét. Nagymamát zavarja a dolog ezért rászól: - Mit bámulsz öreg úgy rám, mint borjú az új kapura? - No hiszen – vág vissza az öreg -, lehet, hogy én borjú vagyok, de ez a kapu ez már bíz nem új! Nagymama sokat morgott magában, mert nagyapa fiatal korában is megérte a pénzét. Legénykorában egyszer el akart menni a bálba, de nem vót csak egy gumicsimmája, hát azt szépen megmosta kifényesítette, ráhúzta a nadrágszárát, hogy senki észre ne vegye, akkor is elment tátizni a lyányokat. Csillogott is a csizma feje, meg lehetett vóna benne borotvákozni. Felkérte a lyányokat táncolni, oszt amikor Buriskát kérte fel, rápillantott a csizmája fejére, majd szívbajt kapott, mert azt hitte a csizmája repedt szét, pedig csak a Buriskán nem vót bugyi.
Ejnye mondtam már neked ilyeneket ne mesélj.
Na jó akkor mást mesélek!
Eccer meg azt monta a nagymamának nézz má ki az ablakon nem egy lu áll az udvarunkon? Kinéz a mama, á nem lu az hanem tehén. Jaj anyjuk, hát ne a tükörbe, hanem az ablakon nézzé ki. Egyik este ücsörögnek a tornácon a karosládán, aszongya a nagyapa - te asszon! Ha egyikünk meghal, én bekőltözök a városba. Oszt minek a lyányokat tátizni? Mást má ugyse tud kend velyük csináni.
Eccer nagyon régen, amikor apám hazavitte leendő feleségjelöltjét, szóval anyámat hogy bemutassa szüleinek, a nagyapa apám fülébe súgta: - Ne vedd el fiam, tűlem van. de ezt ne áruld el anyádnak. Nagymama kérdi mit súgott apád fiam? hogy ne vegyem el mert ü az apja. - Fiam, vedd el bátran, te nem tűle vagy, de ezt ne áruld el neki. Hoppá…
Mesélj még valamit!
Amikor a nagyapa 1950-ben nagy unszolásra belépett a pártba, a falu párttitkára elküldte a parlamentbe küldöttgyűlésre. Akkor nagy hasznát vette vóna a kuffernek, amit a helóstól nem vett meg. Nagyapa sose vót kinn a falun kívül, már a vonat is csuda vót neki. A vonaton a fülkében ült, oszt mivel előző este paszulyt evett hát egy embereset szellentett.
   -     Jaj ne! Már megint mit mesélsz te kölyök.
   -     Így vót na, haljak meg ha nem.
   -     A mellete ülő utas megjegyezte; ez hallatlan, és az orrát eltakarta a kezével.
Na ez az utas süket vót, de a fingnak azért van szaga, hogy a süket is élvezhesse ugyi.
   -     Utána felpattan egy másik utas szemből és így szólt: Kikérjük magunknak! Nem kell komám, már kinn van!
   -     Erre felpattan a harmadik utas is, ő így szól: - No de kérem, itt többen is vagyunk.
   -     Hát, akkor osszák el egymás között igazságoson!
   -     Szóval amikor odaért a parlamenthez, azt megösmerte mert az újságba látta.
Igen ám de át kellet vóna menni a túlsó ódalra, de annyi francos autó ment az uton hogy sehogy se sikeredett neki. Leszólított egy fiatal legényt mondja mán meg hogy lehet oda átal menni? Bátyám látja azt a lámpát ahol a sok ember áll, na menjen oda oszt ott átmehet.
Odament, oszt megkérdezte egy másik embörtül; Miért van három lámpája? Jól figyeljen a piroson a kommunisták mennek át, a sárgán a zsidók, a zöldön a nyilasok, megértette. Nem vagyok én hüle persze hogy értem. Látta nagyapa, hogy zőldre vált és elindulnak az emberek, azt a kutyafáját, hogy itt mennyi nyilas van még mindig. Majd sárgára vált és még páran átszaladnak, nahát alig maradt itt zsidó állapította meg csak úgy magának. Ekkor pirosra váltott, na ez az én színem és szépen komótosan átsétált, az autósok dicsérő szavai közepette. A túloldalon várakozó rendőr, közölte vele, mivel belépett fizessen 50 forint büntetést. Elismeri? Elismerem ötvenben beléptem.  Hozzá tette még, hogy különben velem bolt a Krisztus aki megvéd, ja akkor 100 Ft a böntetés, Az öreg hazaérve, felment a párttitkárhoz, majd a paphoz, hogy ü bizony kilép a pártbul, meg az egyházbul is, mert pesten 50-50 forintra büntették azért mert belépett a pártba és keresztény.
   -     Ez bizony így vót, kutya legyek ha nem.
   -     Van kutyátok?
Van hát, de mindig szomszédol, de a szomszéd kutyája meg, mindig átjárt a nagyapa kertjibe, fene a dógát ott érezte jól magát, de az öreget nem zavarta. Este felé ült a tornácon a karosládán és pipázgatott, a házelőtt a kertben meg a szomszéd kutyája aludt a lugas alatt. A komája arra sétált, nézegette a kutyát, majd megkérdi:
   -     Gyula komám harap a kutyád?
   -     Nem. komám az enyém nem.
   -     A koma belépett a kapun a kutya meg majd szét tépte, alig érkezett kiugrani.
   -     Komám hát azt mondtat, hogy nem harap a kutyád, és mégis majdnem széttépett.

   -     Mire az öreg: - Ja hogy ez?, de ez nem az én kutyám.

Na hát ilyen vicces embör vót az én nagyapám.
Eccer me jött a finác, oszt nagyapa mondta neki, hogy bárhova mehet, csak az istállóba ne. Na, erre nagy arrogánsan előhúzza a szolgálati igazolványát, én ezzel akárhova bemehetek, úgy hogy nem maga fogja megmondani nekem, hogy mit csináljak. - Hát, sok olyan embert ismerek aki Pökhendről származik, nem is gondoltam volna, hogy ilyen nagy falu...Rendben van, maga tudja, azéris belépett az istállóba, majd kisvártatva üvöltözve sprintel visszafelé, mögötte a bika. Láthatóan az életéért fut, és a bika minden egyes méteren teret nyer. Nagyapa azonnal eldobja a kezéből a vödröt, rohan a kerítéshez és teli torokból kiáltja neki: - AZ IGAZOLVÁNT! MUTASSA NEKI AZ IGAZOLVÁNT!!!
nevetett egy göndöret azzal a fiú felugrott és elszaladt. Ez a történet egy fagyi ára volt.

Hálózati alapismeretek

A JavaScript nyelvről

1. Főbb tulajdonságok:

    Interpretálás: a forrássorokat a böngésző értelmezi és hajtja végre, lépésről lépésre.
    Tehermentesíti a kiszolgálót és a közbülső hálózatot. (Űrlapok kitöltésekor a kliens ellenőrzi az adatok helyességét)
    Interaktivitás (input mezők, egérműveletek)
    Biztonság: a JavaScriptben nincs semmilyen utasítás vagy függvény, amivel elérhetővé válnának a kliens fájljai a kiszolgáló számára.

2. JavaScript alapok

    Beillesztése a HTML forrásba:
        A <SCRIPT> jelölő segítségével

        <SCRIPT language = "JavaScript">
        ...
        </SCRIPT>
        Eseménykezelőként, más HTML jelölők paramétereként (ld. később)
    Megjegyzés: /* ..... */   vagy // (a sor hátralévő része).
    Kis- és nagybetűk különbözőek.
    Objektum alapú nyelv. Egy objektum részei: elemváltozók (tulajdonságok) és elemfüggvények (metódusok).
    Saját változók használata, típusok:

        var kor = 21;                // egész
        var kamatláb = 10.5          // lebegőpontos (valós)
        var lakhely = "Nyíregyháza"; // vagy 'Nyíregyháza', string
        var hazas = false;           // logikai (boolean), false/true

    A var elhagyható, de használata ajánlott (egy függvény belsejében lokális változót csak így definiálhatunk).
    Az utasítások végén pontosvessző. (Elhagyható, ha külön sorban vannak az utasítások.)
    A JavaScript gyengén típusos nyelv: automatikus konverziók.

    var a = 5;
    var b = '6';
    var c = '7';
    a + b értéke 11,   b + c értéke '67', b * c értéke 42 lesz.

2_1. Példa: Képcsere 1. Ha az egeret a kép fölé visszük, az megváltozik. Megoldás
2_1. Feladat: Képcsere 2. Amelyik kis kép fölé visszük az egeret, az jelenik meg nagyban.
3. Operátorok, kifejezések

    Aritmetikai:

    *, /, % (az osztás maradékát adja vissza: 5 % 3 értéke 2, 5.5 % 3 értéke 2.5) , +, -
    
    Logikai:

    ! (negálás, egy operandusú), && (és), || (vagy)
    
    Összehasonlító:

    == (egyenlő), != (nem egyenlő), <, >, <=, >=
    
    Léptető (egy operandusú operátorok):

    ++, --
    ++a; //növeli a értékét eggyel, értéke a+1
    a++; //növeli a értékét eggyel, értéke a

    3_1. Példa: forrás, futtatás  (A források sok hasznos és új információt tartalmaznak!)
    
    Bitenkénti:

    ~ (negálás, egy operandusú), & (és), | (vagy), ^ (kizáró vagy), << (balra léptetés pl: a << 2), >> (jobbra léptetés az előjel megtartásával), >>> (jobbra léptetés, az előjelet nem veszi figyelembe) (ld. 3. Példa)
    
    Értékadó:

    =,
    +=, -=, *=, /= stb.  Összetett értékadások, bármely kétoperandusú aritmetikai, bitenkénti műveletre.
    Értelmezése: a += b egyenértékű: a = a + b

    3_2. Példa: Számológép1 forrás, futtatás
    3_3. Példa: Számológép2 futtatás
    3_1. Feladat: Jelenjen meg három nyomógomb a weblapon piros, kék ill. fehér felirattal. Amelyikre kattintunk, olyan színű legyen a háttér.
    Segítség: a háttérszín elérése: document.bgColor.
    3_2. Feladat:Készítsünk valuta váltó programot!

    Feltételes kifejezés

    feltétel ? kifejezés1: kifejezés2    értéke: kifejezés1, ha a feltétel igaz, kifejezés2, ha a feltétel hamis.
    Pl.: c = a > b ? a: b;     c értéke a és b közül a nagyobbik lesz

    3_4. Példa: Párosság forrás, futtatás

    3_3. Feladat: Két számról döntsük el, hogy a második osztója-e az elsőnek! forrás, futtatás
    

4. Utasítások
4.1 Utasítás blokk, összetett utasítás
Kapcsos zárójelek között bármennyi utasítás. Mindenütt állhat, ahol egy utasítás állhat. (Pl. ciklusok, szelekciók belsejében.)

4.2 for ciklus
Szintaktikája:
for(inicializáló kifejezés;feltétel;léptető kifejezés)
    utasítás

Az inicializáló kifejezés egyszer, amikor a ciklusra kerül a vezérlés, hajtódik végre. A ciklus addig ismétli az utasítás vére hajtását, amíg a feltétel (logikai kifejezés) igaz. Az utasítás után mindig végrehajtja a léptető kifejezést. Az inicializáló kifejezés több részből is állhat, vesszővel elválasztva. A ciklusfej bármely része elhagyható. Az utasítás lehet blokk is.

4_1. Példa: Összegzés futtatás
4_2. Példa: Csillagok futtatás

Feladatok:
  4_1. N! kiszámítása
  4_2. Írjunk ki csillagokat háromszög alakban!
  4_3. Állítsuk elő a szorzótáblát ciklusok segítségével!
4.3 while utasítás
Szintaktikája:

while (feltétel)
    utasítás

Addig ismétli az utasítást, amíg a feltétel (logikai kifejezés) igaz. Az utasítás lehet blokk is.

4_3. Példa: Írjuk ki, hogy a 10%-os kamatra elhelyezett pénzünk hány év alatt éri el az egymillió Ft-ot! futtatás

4.4 do while utasítás
Szintaktikája:
do{
    utasítások
}while(feltétel)

Hátul tesztelő ciklus. Addig ismétli az utasítást, amíg a feltétel (logikai kifejezés) igaz.

4_4. Példa: Írjuk ki, hogy a 10%-os kamatra elhelyezett pénzünk hány év alatt éri el az egymillió Ft-ot! futtatás

4.5 Az if... else... utasítás
Szintaktikája:
if (feltétel)
   utasítás1
else
   utasítás2

Ha a feltétel (logikai kifejezés) igaz, akkor akkor az utasítás1 kerül végrehajtásra, majd az if szerkezet utáni utasításokkal folytatódik a program. Ha a feltétel hamis, akkor az utasítás2 kerül végrehajtásra. Az else ág elhagyható. Mindkét utasítás lehet összetett utasítás is.

4_5. Példa: Üdvözöljük a napszaknak megfelelően a felhasználót! futtatás

Feladatok:
  4_4. Az üdvözlés négy féle legyen: Jó reggelt!, Jó napot!, Jó estét!, ill. Jó éjszakát!
  4_5. Írjunk JavaScript függvényt, amely kiértékeli a következő űrlapot!

4.6 A switch utasítás
Többágú szelekciót tesz lehetővé. Szintaktikája:

switch (kifejezés)
{
     case érték1:
        utasítások
        break
     case érték2:
        utasítások
        break
        ...
     default:
        utasítások
}

A kifejezés kiértékelése után az értelmező azon a case ágon folytatja a futtatást, ahol az érték megegyezik a kifejezés értékével. Ha ilyen ág nincs, akkor a default ágra kerül a vezérlés. A default ág elhagyható. A break utasítással érhetjük el azt, hogy a megfelelő ág végrehajtása után a vezérlés a switch utáni első utasításra kerüljön.

4_6. Példa: Írjuk ki, hogy milyen nyelvű böngészőt használunk! forrás, futtatás


5. Egyszerű párbeszédablakok
Az alert, a  confirm, valamint a prompt az előre definiált window objektum elemfüggvényei. A window objektum az aktuális ablakot reprezentálja, ez az alapértelmezés, nem szükséges kiírnunk a nevét (pl. window.alert...).

alert: A felhasználót tájékoztathatjuk egy üzenettel. Szintaktikája: alert(üzenet). Az argumentumként kapott stringet (üzenet) egy OK gomb társaságában kiírja egy kis párbeszédablakba.

confirm: A felhasználó igaz/hamis döntést hozhat. Szintaktikája: confirm(üzenet). Az argumentumként kapott stringet (üzenet) egy OK és egy Cancel gomb társaságában kiírja egy kis párbeszédablakba. A függvény true értékkel tér vissza, ha az OK, és false értékkel, ha a Cancel gombot nyomtuk meg.

prompt: Egy szövegbeviteli mezőt nyúj. Szintaxisa: változó = prompt(kiírandó, alapérték). Megjeleníti a kiírandó stringet, valamint egy szövegbeviteli mezőt benne az alapértékkel (string), amit felülírhatunk. Visszatérési értéke a beírt szöveg (, ha az OK-ra kattintottunk).

5_1. Példa: futtatás

5_1. Feladat: Egy gombra kattintva jelenjen meg egy dialógusablak, melyben angolul megadhatjuk az oldal kívánt háttérszínét! (A document objektum bgColor elemváltozójának kell értéket adnunk.)

6. Időzítés
A setTimeout függvény időzített programvégrehajtásra szolgál. Szintaxisa: setTimeout("kifejezés", msec). Egy időzítés indul el, és az msec-ben megadott milliszekundum múlva a kifejezés (ami általában JavaScript utasítás, vagy függvény) végrahajtódik.

6_1. Példa: Egy link automatikus aktivizálódása (letöltése) egy megadott időintervallum letelte után. futtatás
6_2. Példa: Egy oldal automatikus frissítése. futtatás
6_3. Példa: Egy szöveg futtatása a státuszsorban. futtatás

6_1. Feladat: Digitális óra megjelenítése. Használjuk a dátum objektum getHours(), getMinutes() és getSeconds() függvényeit!

7. Űrlap ellenőrzése elküldés előtt
Az űrlapokat általában elküldjük egy a szerveren lévő programnak, amely feldolgozza a benne szereplő adatokat. Ha az űrlapot hibásan töltöttük ki, akkor feleslegesen terheljük mind a hálózatot, mind a szerver oldali programot. Egy JavaScript programmal a kliens oldalon el lehet végezni a kitöltött mezők ellenőrzését (a JavaScript programot a böngésző futtatja), és így csak a hibátlan űrlapot küldjük el a szervernek.

Az alábbi példa négy különböző mező ellenőrzését végzi el. Ehhez használjuk a stringek kezelését megvalósító string objektum elemváltozóit, elemfüggvényeit:

string objektum:
  Elemváltozó:
    length   a string hosszát tartalmazza.
  Elemfüggvények:
    charAt(index)  az index-edik pozícióban lévő karakterrel tér vissza. (A karakterek sorszámozása 0-va kezdődik!)
    indexOf(minta) a minta-t keresi, visszatérési értéke a megtalált pozíció, ill. ha nem talál: -1.
    substring(index1, index2) egy részlánccal tér vissza az index1-től az index2 előtti karakterrel bezárólag.
    toLowerCase() kisbetűssé konvertálja a stringet.
    toUpperCase() nagybetűssé konvertálja a stringet.

A JavaScript

Mi a JavaScript?

A JavaScriptet a Netscape fejlesztette ki. Ez egy olyan parancsnyelv, amely segítségével létrehozhatunk interaktív Web-oldalakat. A cikk során számos klasszikus példával megismerkedhet az olvasó, ezeket könnyedén beépítheti a saját oldalaiba, vagy továbbfejlesztheti õket saját igényeinek megfelelõen. Az Internetrõl is letölthetõ sok egyszerû és kevésbé egyszerû példa. Tanácsos ezek forrását is áttanulmányozni, hiszen jó ötletek leshetõk el belõlük.

A JavaScript nem Java!

Mielõtt mélyebben belekezdenénk a JavaScript tanulmányozásába, érdemes egy fontos különbségre felhívni a figyelmet. A JavaScript nem tévesztendõ össze a Java-val! A hasonló név ellenére a Java önálló programozási nyelv, szükség van fordító programra, amivel a forráslistából bájtkódot készíthetünk. A JavaScript pedig parancsnyelv, futtatásához nem kell más, mint egy böngészõ, amely kezelni képes a JavaScriptet.

Hasonlóság azonban nem csak a névben van, ugyanis a két nyelv szintaxisa a C nyelvhez hasonlatos, a manapság divatos objektumorientáltságot pedig egyikük sem kerülhette el.

JavaScript futtatása

Mint korábban említettem, csak egy JavaScriptet "értõ" böngészõre van szükségünk. Ez lehet akár a Netscape Navigator, amely a 2.0-as verzió óta ismeri a JavaScriptet, vagy a Microsoft Internet Explorer (3.0 vagy nagyobb verzió). Mivel ezek a böngészõk a legelterjedtebbek, így a legtöbb ember képes JavaScriptet futtatni.
Ha az olvasó nem ismerné a HTML alapjait, érdemes most utána olvasni az Interneten található leírásokban, vagy az errõl szóló szaklapokban, mielôtt tovább olvasná a leírást.

JavaScript beágyazása HTML dokumentumba

A JavaScript utasítások közvetlenül a HTML oldalba kerülnek be. Lássunk erre egy egyszerû példát:

<HTML>
<BODY>
Ez itt egy hagyományos HTML dokumentum.<BR>
  <SCRIPT LANGUAGE="JavaScript"> 
    document.write("Ez már JavaScriptben íródott!!!<BR>")
  </SCRIPT>
Ez a sor újra HTML!<BR>
</BODY>
</HTML>


Ha a böngészõnk értelmezni tudja a JavaScriptet, akkor ez a pár sor a következõt eredményezi:

Ez itt egy hagyományos HTML dokumentum.
Ez már JavaScriptben íródott!!!
Ez a sor újra HTML.

A három sor közül az elsõ és utolsó HTML-ben íródott, míg a középsõt a JavaScript document.write() parancsával írattuk ki. Látható, hogy a HTML <SCRIPT> elemét használtuk arra, hogy JavaScript utasításokat ágyazzunk a HTML dokumentumunkba. Minden, amit a <SCRIPT> és a </SCRIPT> elemek közé teszünk JavaScript utasításokként értékelõdnek ki. A LANGUAGE attribútum segítségével a JavaScript verziószámát határozhatjuk meg. A lehetséges verziók:

    <SCRIPT LANGUAGE="JavaScript"> 1.0-ás JavaScript-et támogató böngészõkhöz
    (pl. Netscape 2.0)
    <SCRIPT LANGUAGE="JavaScript1.1"> 1.1-es JavaScript-et támogató bôngészõkhöz
    (pl. Netscape 3.0)
    <SCRIPT LANGUAGE="JavaScript1.2"> 1.2-es JavaScript-et támogató bôngészõkhöz
    (pl. Netscape 4.0)

Ez azt jelenti, hogy például a Netscape 2.0 a JavaScript1.1, a Netscape 3.0 a JavaScript1.2 verziójú kódot figyelmen kívül hagyja.

Mi történik akkor, ha a böngészõnk régebbi, JavaScriptet nem ismerõ típus? Mivel a böngészõ nem ismeri a <SCRIPT> elemet, ezért azt nem veszi figyelembe, és a közötte lévõ utasításokat szövegként jeleníti meg a HTML dokumentumon belül. Természetesen van megoldás ennek elkerülésére. Amint az ismert, a HTML dokumentumokba megjegyzéseket az alábbi módon tehetünk:

<!-- A megjegyzés eleje
....................................
A megjegyzés vége -->

Javítsuk ki az elõbbi egyszerû példát az alábbi módon:

<HTML>
<BODY>
Ez itt egy hagyományos HTML dokumentum.<BR>
  <SCRIPT LANGUAGE="JavaScript">
  <!-- A JavaScript kód elrejtése, amennyiben szükséges
    document.write("Ez már JavaScriptben íródott!!!<BR>")
  // A kód elrejtésének vége -->
  </SCRIPT>
Ez a sor újra HTML!<BR>
</BODY>
</HTML>

A JavaScript utasításokat HTML megjegyzések közé tesszük, így a nyelvet nem ismerõ böngészõk nem jelenítik meg az utasításokat, ugyanis azt megjegyzésként értelmezik. A JavaScriptet nem ismerõ böngészõ ezt a kódot az alábbi módon jelenítené meg:

Ez itt egy hagyományos HTML dokumentum.
Ez a sor újra HTML.

Ellenkezõ esetben igen zavaros sorokat kaphatunk:

Ez itt egy hagyományos HTML dokumentum.
document.write("Ez már JavaScriptben íródott!!!<BR>")
Ez a sor újra HTML.

Fontos viszont megemlíteni, hogy a JavaScript nem védhetõ meg a "kíváncsiskodó szemek" elöl, hiszen a HTML dokumentumok forrása megtekinthetõ a legtöbb böngészõ segítségével, a JavaScript utasítások pedig ennek közvetlen részét képezik.

Események

A programoknak gyakran kell reagálnia olyan eseményekre, mint billentyû lenyomása, vagy az egér mozgatása. Az események és eseménykezelõk a JavaScript programozásban is nagyon fontosak. Az ilyen események kezeléséhez különféle függvények, eseménykezelõk léteznek.
Tekintsük a következõ példát. Azt akarjuk, hogy a JavaScript programunk reagáljon valamilyen eseményre, pontosabban létrehozunk egy gombot, amire kattintva egy ablak jelenik meg a képernyõn. Ez gyakorlatilag azt jelenti, hogy az ablaknak egy kattintás-esemény (click-event) hatására kellene megjelenni. Az itt használt eseménykezelõ neve: onClick.

<form>
<input type="button" value="Kattints rám!" onClick="alert('Hello!')">
</form>

Ebben a példában létrehoztunk egy ûrlapot, amely egyetlen gombból áll. Ennek így még semmi köze nincs a JavaScripthez, hiszen ezt HTML-ben írtuk meg. Az újdonság az onClick="alert('Hello!')" rész, ami az <INPUT> HTML elem belsejében található, és ez már valóban JavaScript (vegyük azt is észre, hogy itt nem használtuk a <SCRIPT> HTML elemet!). Ez mondja meg, hogy mi történjen akkor, ha a felhasználó megnyomja a gombot. Ha ez bekövetkezik, akkor valójában egy onClick esemény generálódik, és ez végrehajtja az alert('Hello!') JavaScript kódot. Ez egy függvény, amely létrehoz egy üzenetablakot, melyben a zárójelen belül idézõjelek közé írt szöveget jeleníti meg.

Figyeljük meg azt is, hogy lehet idézõjelen belül idézõjelet használni! JavaScriptben mindkét idézõjelet lehet használni, csak arra kell ügyelni, hogy ez a számítógép számára is egyértelmû legyen. Az alábbi idézõjelhasználat is helyes lett volna:

onClick='alert("Hello!")'

Általánosan így írható le az eseménykezelés szintaxisa:

<HTML_elem eseménykezelõ_neve="JavaScript_utasítás">


Még sok más eseménykezelõ létezik. Ezek közül néhánnyal még találkozunk a cikk során, de addig is a következõ táblázat összefoglalja a fontosabb eseményeket:


Események     Mire alkalmazható?     Mikor következik be?     Az eseménykezelõ neve
abort
    képek     A felhasználó megszakítja a kép betöltését    
onAbort
blur     ablak, keret, és minden ûrlapmezõ     Az egérrel az aktuális mezõn kívülre kattintunk    
onBlur
change     szövegmezõ, listaablak     Megváltoztatunk egy ûrlap beli értéket    
onChange
click     gombok, rádió gomb, csatolások (linkek)     Az ûrlap valamely elemére, vagy egy csatolásra (link) kattintunk    
onClick
error
    ablak, képek     Ha kép vagy dokumentum betöltésekor hiba lép fel    
onError
focus     ablak, keret, minden ûrlapmezõ     Kijelöljük az ûrlap egy elemét    
onFocus
load     dokumentum törzse (BODY)     A böngészõ új lapot tölt be    
onLoad
mouseout
    linkek     Az egérmutató elhagyja a linket    
onMouseOut
mouseover     linkek     Az egérmutató valamely link felett tartózkodik    
onMouseOver
reset
    ûrlapokra     Ûrlap törlésekor    
onReset
select     szövegmezõ     Új mezõt jelölünk ki    
onSelect
submit     submit típusú nyomógomb     Ûrlap elküldésekor    
onSubmit
unload     dokumentum törzse (BODY)     Ha másik HTML oldalra lépünk    
onLoad



Függvények

Minden programozási nyelvben, így a JavaScript-ben is rendkívül fontos szerepet kapnak a függvények. A nyelv számos függvényt tartalmaz, például a korábban megismert alert() függvény is ezek közül való. A függvényeknek adhatunk át paramétereket, amelyekkel dolgozni fognak (az alert() függvény paramétere az idézõjelek között átadott szöveg volt, amit a függvény egy üzenetablakban jelenített meg). Mi magunk is írhatunk függvényeket, hogy a nagyobb, összetettebb feladatokat kisebb, jobban kezelhetõbb részekre bontsuk. Ezek a függvények szintén átvehetnek paramétereket, sõt értéket is adhatnak vissza, csakúgy, mint más progamozási nyelvekben. A függvények mûködését egy rövid példán keresztül mutatom be:

<HTML>
<SCRIPT LANGUAGE="JavaScript">
<!-- A JavaScript kód elrejtése, amennyiben szükséges

function szamol_1(x,y){
  var eredmeny = x + y;
  document.write("<H2>" + x + " + " + y + " =
" + eredmeny + "</H2><BR>");
}

function szamol_2(x,y){
  return x+y;
}

szamol_1(23,11);
szamol_1(17,27);
szamol_1(3,45);

document.write("<H2>13 + 5 = " + szamol_2(13,5) + "<H2>");

//-->
</SCRIPT>
</HTML>


A program eredménye a következô lesz:

23 + 11 = 34

17 + 27 = 44

3 + 45 = 48

13 + 5 = 18

Ebben a rövid programban két függvényt hoztunk létre szamol_1 és szamol_2 néven. Figyeljünk arra, hogy a JavaScript a kis- és nagybetûk között különbséget tesz, így például a JAVASCRIPT, javascript, JavaScript három különbözõ függvénynévnek bizonyulna.
A JavaScript-ben írt függvények elé kötelezôen be kell írni a function kulcsszót, viszont ellentétben pl. a C++ vagy a Java függvényeivel nem kell a visszatérési értéknek, valamint a paramétereknek a típusát megadni.
Nézzük most meg részletesen a szamol_1 nevû függvényt, hogyan épül fel, és hogy mûködik!


function szamol_1(x,y){
  var eredmeny = x + y;
  document.write("<H2>" + x + " + " + y + " = " + eredmeny + "</H2><BR>");
}

A function kulcsszót közvetlenül a függvény neve követi, majd zárójelekben a paramétereket adjuk meg. Ez a függvény két paraméterrel rendelkezik, x-szel és y-nal (amelyek típusát nem adtuk meg). A függvény törzse kapcsos zárójelek között van, és ide helyezzük el a függvényhez tartozó utasításokat.
A függvényben három változót is használunk (x, y és eredmeny). A JavaScript programok változókban tárolják az információkat, adatokat. A példánál maradva x illetve y tárolja el az összeadandó számok értékeit, és az eredmeny nevû változó tárolja el az összeget.
Eltérôen más programozási nyelvektôl, a JavaScript-ben nem kell definiálnunk a változók típusát (mint pl. int, float, char stb.), hanem azt a programot végrehajtó böngészô állapítja meg a változók használata alapján.
JavaScript-ben a változók neve betûvel, vagy aláhúzással (_) kezdôdhet, és a függvénynevekhez hasonlóan szintén különbség van kis- és nagybetûk között.
Változót a var kulcsszóval, majd a változó nevének megadásával deklarálhatunk. Deklaráláskor az értékadó operátor (=) segítségével kezdôértéket is rendelhetünk a változókhoz. Ezt tettük a példánkban is:

var eredmeny = x + y;

Azaz létrehoztuk az eredmeny nevû változót, és kezdôértéknek a paraméterként átadott x és y változók összegét adtuk. A függvény törzsének második sora elvégzi a számolás eredményének kiírását. A document.write utasítást használtuk itt fel, amivel már találkoztunk. Az egyetlen érdekesség az argumentumban található, a zárójeleken belül, ugyanis a kiírandó szöveget részekbôl fûztük össze. A "<H2>" rész HTML-bôl ismerôs, a kiírás típusát határozza meg. Ehhez fûzzük hozzá az x változót. Mivel x nem idézôjelek között van, ezért nem egy x karakter, hanem az x változó értéke kerül kiírásra. És így tovább, elôször egy "+" karaktert, majd y változó értékét, egy "=" karaktert, ill. az eredmeny változó értékét fûzzük az eddigi karakterláncunkhoz, legvégül a "</H2>" HTML elemmel zárjuk le a karakterláncunkat a HTML szabályainak megfelelôen. Ha x értéke 23, y értéke 11, akkor az eredmeny változó értéke x és y összege, azaz 34 lesz, és a kiírandó karakterlánc a következônek felel meg:

"<H2> 23 + 11 = 34 </H2>"

A függvényeket a nevükkel hívjuk meg, és híváskor adjuk át a paraméterek aktuális értékét. Példánkban az elsô függvényt háromszor hívtuk meg:

szamol_1(23,11);
szamol_1(17,27);
szamol_1(3,45);

Látható, hogy a függvény nevét követi az ún. aktuális paraméter lista, ami az elsô esetben 23 és 11, azaz a függvényben szereplô x változó értéke 23, míg az y értéke 11 lesz. Az aktuális paraméterlistát ugyanúgy zárójelek közé tesszük, mint a függvények definíciójában szereplô formális paraméterlistát. A második esetben ez alapján x 17, y 27, a harmadik esetben x 3, y 45 értéket vesz fel.

A szamol_2 függvény egy lényeges dologban különbözik az elôbbitôl. Rendelkezik visszatérési értékkel.


function szamol_2(x,y){
  return x+y;
}

Amint említettem, JavaScript-ben eltérôen más programozási nyelvektôl nem kell a visszatérési érték típusát megadni. A függvény x+y értéket adja vissza a return utasítás felhasználásával. Figyeljük meg a függvény hívását!


document.write("<H2>13 + 5 = " + szamol_2(13,5) + "</H2>");

A szamol_2 függvényt a 13 és 5 paraméterekkel hívtuk meg, amely kiszámolja azok összegét és visszatér ezzel az értékkel. Ez az érték behelyettesítôdik a hívás helyére, így a document.write függvény argumentuma gyakorlatilag a következô lesz:


"<H2>13 + 5 = 18 </H2>"

A HTML dokumentum

A JavaScript felépítése

A JavaScript egy HTML oldal minden elemét, és a böngészô ablakát is objektumként kezeli. Minden ilyen objektum rendelkezik tulajdonságokkal (adatmezõkkel) és megfelelô függvényekkel, amelyeken keresztül az oldal szinte minden tulajdonságát megváltoztathatjuk, a böngészô egyes részeit programozhatjuk. A böngészô ablaka a JavaScript szemszögébôl egy ún. window objektum (window-object). Ez bizonyos elemeket tartalmaz, mint például a státuszsort. Az ablak belsejébe HTML oldalt tölthetünk, amit a JavaScript a document objektumon keresztül kezel. A document objektum az aktuálisan betöltött oldalt kezeli, és ezáltal egyike a leggyakrabban használt és legfontosabb objektumoknak. Segítségével módosíthatjuk az oldalunk megjelenését, például beállíthatjuk a színeket! Próbáljuk ki az alábbi példát!

Nézzük meg a kódot!

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- A kód elrejtése, ha szükséges

function sarga(){
  document.bgColor="#FFFF00";
}

function kek(){
  document.bgColor="#00FFFF";
}

function eredeti(){
  document.bgColor="#FFFFFF";
}

// --> Elrejtés vége
</SCRIPT>
</HEAD>

<BODY>
<CENTER>
<P>
<FORM>
<INPUT TYPE="button" VALUE="Sárga háttér" onClick="sarga()">
<INPUT TYPE="button" VALUE="Kék háttér" onClick="kek()">
<INPUT TYPE="button" VALUE="Eredeti háttér" onClick="eredeti()">
</FORM>
</P>
</CENTER>

</BODY>
</HTML>

Létrehoztunk három függvényt sarga(), kek() és eredeti() néven. Mindegyik egyetlen értékadó utasítást tartalmaz, amellyel a document objektum bgColor nevû mezôjének adunk új értéket. Ebben az adatmezôben tárolódik ugyanis a háttérszín aktuális beállítása. Ha ezt felülírjuk valami más értékkel, akkor megváltozik a dokumentum háttérszíne is. Az új színt a HTML-bôl jól ismert RGB színkód formájában kell megadni. A gombokat egy ûrlappal állítottuk elô, és a Bevezetésben már bemutatott onClick esemény hatására hívódnak meg a megfelelô függvények.

Megváltoztathatók a HTML oldalunk egyéb színbeállításai is, ha a document objektum más adatmezôjének adunk az elôbbihez hasonló módon értéket. Egy táblázatban foglaljuk össze a színekkel kapcsolatos mezôket:

alinkColor     Az aktív linkek színe
bgColor     Háttérszín
fgColor     Az elôtér színe
linkColor     A linkek színe
vlinkColor     Már meglátogatott linkek színe

Ezek ismeretében a linkek színét például a következô utasítással vátoztathatjuk meg:



document.linkColor = "#xxxxxx"


ahol xxxxxx helyére a kívánt RGB színkódot kell beírni.

Ennél sokkal fontosabb azonban, hogy a HTML objektumok is a document objektum mezôi. HTML objektumok például az oldalon megjelenô képek, linkek, ûrlapok. Mielôtt megnéznénk, hogy milyen módon kezelhetjük ezeket az objektumokat, hozzunk létre egy egyszerû HTML oldalt!

<HTML>
<HEAD><TITLE>Példa oldal</TITLE></HEAD>
<BODY BGCOLOR=#FFFFFF>

<CENTER>
<IMG SRC="pelda1.jpg" NAME="pelda_pic1">

<P>
<FORM NAME="pelda_urlap">
Név:
<INPUT TYPE="text" NAME="nev" VALUE="JavaScript"><BR><BR>
Cím:
<INPUT TYPE="text" NAME="cim" VALUE="www.netscape.com"><BR><BR>
<INPUT TYPE="button" VALUE="Kattints rám" NAME="gomb"
onClick="alert('Most megnyomtál! :-)')">
</FORM>

<P>
<P>
<IMG SRC="pelda2.jpg" NAME="pelda_pic2">

<P>
<P>
<A HREF="http://www.netscape.com">Nézd meg a Netscape JavaScript
oldalait is!</A>
</CENTER>

</BODY>
</HTML>


Ez a rövid HTML kód a következô dokumentumot eredményezi.


Hogyan hivatkozhatunk az oldal egyes elemeire? Ebben a példa HTML dokumentumban két kép, egy link és egy ûrlap található két szövegmezôvel valamint egy gombbal. A hivatkozás az egyes objektumok típusa szerint megy. Az oldalon elôforduló elsô képhez az images[0] névvel férhetünk hozzá, a másodikhoz az images[1] névvel és így tovább. A linkek a links[0], links[1], links[2]... néven szerepelnek. Az ûrlapokat forms[0], forms[1], forms[2]..., míg az ûrlapok egyes mezôit (pl. szövegmezô, listaablak, gombok) forms[X].elements[0], forms[X].elements[1], forms[X].elements[2]... névvel érhetjük el, ahol X valamely ûrlap sorszáma.

A példánál maradva nézzük meg sorrendben, hogy az oldalon található HTML objektumokra hogyan hivatkozhatunk (mivel a HTML objektumok a document objektum mezôi, ezért mindegyik hivatkozás ezzel kezdôdik):

    az elsô képre:
    document.images[0]
    az ûrlap Név nevû szövegmezôjére:
    document.forms[0].elements[0]
    az ûrlap Cím nevû szövegmezôjére:
    document.forms[0].elements[1]
    az ûrlap gombjára:
    document.forms[0].elements[2]
    a második képre:
    document.images[1]
    a linkre:
    document.links[0]

Azt, hogy egy hivatkozás révén milyen mûveleteket végezhetünk el az egyes HTML objektumokkal, különbözô JavaScript referencia könyvek tartalmazzák. Mi néhány alapvetô mûveletet nézünk csak meg. Hivatkozzunk az ûrlapunk elsô szövegmezôjére, olvassuk ki a tartalmát a nev nevû változóba! Ezt megtehetjük az alábbi utasítással (figyeljünk arra, hogy kis- és nagybetû itt is számít):



nev = documents.forms[0].elements[0].value;

A szövegmezô tartalma bekerült a változónkba, amivel továbbiakban különféle mûveleteket végezhetünk: pl. kiírathatjuk egy üzenetablakba az alert("Szia " + name) függvénnyel. Nézzük meg ezt mûködés közben, majd utána a kódot, amelyben már minden ismert!

Név:  

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Elrejtés

function Udvozol(){
  var name = document.forms[0].elements[0].value; 
  alert("Szia "+name);
}
// -->
</SCRIPT>
</HEAD>

<BODY>
<FORM NAME="urlap"> Név:  <INPUT TYPE="text" NAME="nev">
<INPUT TYPE="button" VALUE="Írd be a neved, majd kattints rám!"
 onClick="Udvozol()">
</FORM>

</BODY>
</HTML>

Jogosan felmerülhet a kérdés, hogy nagyobb HTML dokumentumok esetén van-e egyszerûbb módszer a hivatkozásra, hiszen nem könnyû sok link, kép, ûrlapmezô esetén kiszámolni, hogy pontosan melyikkel szeretnénk dolgozni. Természetesen erre is van lehetôség, mégpedig úgy, hogy minden HTML objektumnak önálló, egyedi nevet adok. Ha az ûrlapunkat megnézzük, akkor látható, hogy ezt már meg is tettük az <INPUT> HTML elemen belül a NAME attribútum megadásával:



<FORM NAME="pelda_urlap">
Név:
<INPUT TYPE="text" NAME="nev" VALUE=""><BR>


Az ûrlapunknak a pelda_urlap nevet, az elsô szövegmezônek a nev nevet adtuk. Ez alapján, erre az objektumra document.forms[0].elements[0] helyett használhatjuk a document.pelda_urlap.nev hivatkozást is.

Új értéket is rendelhetünk bizonyos HTML objektumokhoz, például egy szövegmezôhöz:

És íme a kód: onClick esemény hatására új értéket rendelünk a az uj nevû ûrlap szoveg nevû mezôjéhez.

<FORM NAME="uj">
<INPUT TYPE="text" NAME="szoveg" VALUE="www.microsoft.com">
<INPUT TYPE="button" VALUE="Új szöveg"
  onClick="document.uj.szoveg.value='www.yahoo.com';">
</FORM>


A location objektum

Ez az objektum reprezentálja a betöltött HTML dokumentum címét. Ha például betöltöttük a Netscape oldalát, akkor a location objektum href mezôje (location.href) ennek az oldalnak a címét fogja tárolni (www.netscape.com). Ehhez a mezôhöz új értéket rendelve új oldalt tölthetünk be a böngészôbe:

<FORM>
<INPUT TYPE="button VALUE="Altavista"
  onClick="location.href='http://altavista.com';">
</FORM>


 Javascript példák
Űrlap "küldése" javascriptben
<head>
    <script type="text/javascript">
        function send() {
            var x = document.getElementById('posts');
            var u = document.f1.user.value;
            var v = document.f1.valami.value;
            x.innerHTML += "<b>"+u+"</b>:"+v+"<br>";         
        }
    </script>
</head>
<body>
<h1>Űrlap feldolgozása Javascriptben</h1>

<div style="padding:20px;border:solid 1px;width:500px;">
<form name="f1" action="javascript:send()">
Név:
<input type="text" name="user" size="30" maxlength="30"><br>
Mondj valamit:
<input type="text" name="valami" size="50" maxlength="50"><br>
<input type="submit" value="Mehet!">
</form>
</div>     
<div id="posts">  </div>
</body> </html>

Űrlap ellenőrzése

<head>
    <script type="text/javascript">
        function send() {
            var x  = document.getElementById('posts');
            var um = document.getElementById('umsg');
            var vm = document.getElementById('vmsg');
            var u  = document.f1.user.value;
            var v  = document.f1.valami.value;
            um.innerHTML = "";
            vm.innerHTML = "";
            if (u=="") {
                um.innerHTML = "Nem maradhat üresen!";
           } else
            if (v=="") {
                vm.innerHTML = "Nem maradhat üresen!";
            } else {
            x.innerHTML += "<b>"+u+"</b>:"+v+"<br>";         
            }
        }
    </script>
</head>

<body>
...
<form name="f1" action="javascript:send()">
    <table>
    <tr><td colspan="2"> <div id="umsg" style="height=20px;color:red;"> </div></td></tr>   
    <tr> <td>Név:</td> <td><input type="text" name="user" size="30" maxlength="30"></td></tr>    
    <tr><td colspan="2"><div id="vmsg" style="height=20px;color:red;"> </div></td></tr>
    <tr> <td>Mondj valamit: </td> <td><input type="text" name="valami" size="50" maxlength="50"></td></tr>
    <tr><td colspan="2"><input type="submit" value="Mehet!"></td></tr>
    </table>
</form>
...
<div id="posts" style="padding:10px;"> </div>
...
</body>
Matematikai algoritmusok

Czövek Márton programja
3k+1 probléma
<script>
    function send(){
        var x = document.getElementById("Szoveg");
        var i = document.f1.Bemenet.value;
        x.innerHTML = i+" , ";
        while( i != 1 ) {
            if ( i%2 == 1) {
                i= 3*i+1;
            } else { i = i/2; }
            x.innerHTML += i+" , ";                  
        }              
    }
</script>
...
<p>
    <strong style="font-size: 18px">Írj be egy számot:</strong>
    </p>  
    <form name="f1" action="javascript:send()">
        <input type="text" name="Bemenet" size="15" maxlength="15"> <br/>
        <input type="submit" value="Küldés">
        <p id="Szoveg"></p>  
    </form>
Eseménykezelők
Katona Dávid játéka:

<!DOCTYPE html>
<html>
<head>
    <title>Game!</title>
    <meta charset="utf-8">
    <style>
        #canvas {
                display: block;
                border: solid 1px;
                margin-top: 50px;
                margin-left: auto;
                margin-right: auto;
               
            }
    </style>
</head>

<body>
    <canvas id="canvas" width= "500" height= "500";></canvas>
    <table  align="center">
        <tr><td><form action="javascript:move()">
            <input type="submit" value="Start!" Onclick="">
        </form></td>
        <td><form>
        <input type="submit" value="Restart!" onClick="href='labda.html'">
        </form></td></tr>
        <tr><td colspan="2">
        <form>
        <select id="Level">
        <option value="Beginner" >Kezdő</option>
        <option value="Medium" > Közepes</option>
        <option value="Impossible" >Legyőzhetetlen</option>
        <option value="Multi" >2 játékos</option></select>
        </form></td></tr>
    </table>
    <script for=document event="onkeydown()" language="JScript">
        if (window.event) KeyDown(window.event.keyCode);
    </script>
    <script language="JavaScript1.2">
    if (navigator.appName != "Microsoft Internet Explorer")
        document.captureEvents(Event.KEYDOWN)
        document.onkeydown = NetscapeKeyDown;
    function NetscapeKeyDown(key){
         KeyDown(key.which);
    }
    </script>
    <script>
        function KeyDown(whichkey){
            if (line.x<=0 && whichkey == 37){line.x=line.x;}
            else{
                if (line.x>=W-l && whichkey == 39){line.x=line.x;}
                else{
                    if (whichkey == 37) {line.x-=linemove;}//Bal nyíl lenyomása esetén...
                    if (whichkey == 39) {line.x+=linemove;}//Jobb nyíl lenyomása esetén...
                    if (whichkey == 52) {line.x-=linemove;}//Bal nyíl a NumPad-on...
                    if (whichkey == 54) {line.x+=linemove;}//Jobb nyíl a NumPad-on...
                }
            }
            if (lv=="Multi"){
                if (enemy.x<=0 && whichkey == 65)
                {enemy.x=enemy.x;}
                else{
                    if (enemy.x>=W-l && whichkey == 68){enemy.x=enemy.x;}
                    else{
                    if (lv=="Multi")
                    {
                        if(whichkey == 65){enemy.x-=linemove;}
                        if(whichkey == 68){enemy.x+=linemove;}
                                            }
                    }
                }
            }
        }
        var c=document.getElementById("canvas");
        var beginner=0;
        var medium=0;
        var impossible=0;
        var pm=1;
        var ctx=c.getContext("2d");
        var x=250, y= 250;
        var frame = 1000/60;
        var H=500, W=500;
        var l=100;
        var score=0;
        var escore=0;
        var linemove= l/5;
        var enemy = {}
        enemy = {
            x : W/2-l/2,
            y : 10,
            vonal: function(){
                ctx.beginPath();
                ctx.moveTo(this.x,this.y);
                if (lv=="Beginner"){ctx.lineTo(this.x+l,this.y);}
                if (lv=="Medium"){ctx.lineTo(this.x+l,this.y);}
                if (lv=="Impossible"){ctx.lineTo(this.x+l/2,this.y);}
                if (lv=="Multi"){ctx.lineTo(this.x+l,this.y);}
                ctx.stroke();
            }
        }
        var ball = {}
        ball = {
            x : W/2,//labda indulási x koordinátája
            y : H-15,//labda indulási y koordinátája
            r : 4,//labda sugara
            vx: 4.10,//labda vízsintes mozgásának összetevője
            vy: 2.2,//labda függőleges mozgásának összetevője
            ax: 0.000,//labda vízszintes gyorsulása
            ay: 0.000,// labda függőleges gyorsulása
            rajz: function(){//Ez a függvény rajzolja le a labdát.
                ctx.beginPath();
                ctx.arc(this.x,this.y,this.r,0,Math.PI*2);
                ctx.stroke();
            }
        }
        var line = {}//Ez az alsó vonal
        line = {
            x : W/2-l/2,
            y : H-10,
            vonal: function(){
                ctx.beginPath();
                ctx.moveTo(this.x,this.y);
                ctx.lineTo(this.x+l,this.y);
                ctx.stroke();
            }
        }
        var anim;
        var lv;
        function move (){
            lv=document.getElementById("Level").value;//lekérdezzük a szintet induláskor.
            anim = setInterval(update,frame)
        }

        function update (){
            ctx.clearRect(0,0,W,H);
            ctx.font = "bold 20px Arial";
            ctx.fillText(escore,5,200);
            ctx.fillText(":",5,250);
            ctx.fillText(score,5,300);
            ball.rajz();
            line.vonal();
            enemy.vonal();
            if (lv=="Beginner")
            {if(pm==2){enemy.x=(ball.x+beginner/2-l/2);}
            else{enemy.x=(ball.x-beginner/2-l/2);}}
            if (lv=="Medium")
            {if(pm==2){enemy.x=(ball.x+medium/2-l/2);}
            else{enemy.x=(ball.x-medium/2-l/2);}}
            if (lv=="Impossible")
            {if(pm==2){enemy.x=(ball.x+impossible/2-l/4);}
            else{enemy.x=(ball.x-impossible/2-l/4);}}
            ball.x+=ball.vx;
            ball.y+=ball.vy;
            ball.vx +=ball.ax;
            ball.vy +=ball.ay;
           
            if (lv=="Beginner"){if (ball.y <=ball.r+enemy.y && ball.x>enemy.x && ball.x<enemy.x+l) {
                    ball.y=ball.r+enemy.y;
                    ball.vy=-ball.vy;
                }
            }//labda visszapattan
            if (lv=="Medium"){if (ball.y <=ball.r+enemy.y && ball.x>enemy.x && ball.x<enemy.x+l) {
                    ball.y=ball.r+enemy.y;
                    ball.vy=-ball.vy;
                }
            }//labda visszapattan
            if (lv=="Impossible")
            {if (ball.y <=ball.r+enemy.y && ball.x>enemy.x && ball.x<enemy.x+l/2) {
                    ball.y=ball.r+enemy.y;
                    ball.vy=-ball.vy;
                }
            }//labda visszapattan
            if (lv=="Multi"){if (ball.y <=ball.r+enemy.y && ball.x>enemy.x && ball.x<enemy.x+l) {
                ball.y=ball.r+enemy.y;
                ball.vy=-ball.vy;
                }
            }//labda visszapattan
            if(ball.y <enemy.y){score+=1;ball.vy=-ball.vy;
                if (score-escore==10){//10 pontkülönbségnél vége van!
                    ctx.fillText("Nyertel: "+score+" "+escore+"-re!", 195, 235);
                    ctx.fillText("Gratulalunk!", 210, 265);
                    clearInterval(anim);//megáll az animáció
                }
            }
            if (ball.y >= -ball.r+line.y && ball.x>line.x && ball.x<line.x+l) {
                ball.y=-ball.r+line.y;
                ball.vy=-ball.vy;
                pm=Math.floor(Math.random()*2)+1;
                if(lv=="Beginner"){beginner=Math.floor(Math.random()*(l+l/3))+1;}
                if(lv=="Medium"){medium=Math.floor(Math.random()*(l+l/5))+1;}
                if(lv=="Impossible"){impossible=Math.floor(Math.random()*(l/4-1))+1;}
            }
            if (ball.y >line.y){
                escore+=1;
                pm=Math.floor(Math.random()*2)+1;
                if(lv=="Beginner"){beginner=Math.floor(Math.random()*(l+l/3))+1;}
                if(lv=="Medium"){medium=Math.floor(Math.random()*(l+l/5))+1;}
                if(lv=="Impossible"){impossible=Math.floor(Math.random()*(l/4-1))+1;}
                ball.vy=-ball.vy;
                if (escore-score==10){//10 pontkülönbségnél vége van!
                    ctx.fillText("Vesztettel: "+score+" "+escore+"-re :S", 165, 235);
                    ctx.fillText("Probald ujra!", 205, 265);
                    clearInterval(anim);//megáll az animáció
                }
            }
            if (ball.x <= ball.r) {// az oldalsó falról való visszapattanás.
                ball.x=ball.r;
                ball.vx=-ball.vx;
            }
            if (ball.x >= W-ball.r) {// az oldalsó falról való visszapattanás.
                ball.x=W-ball.r;
                ball.vx=-ball.vx;
            }
        }
    </script>
</body>
</html>