Adatok küldése és fogadása
Html oldalról, adat küldése a JavaScript programunknak.
A HTML oldalon elhelyezünk egy form szakaszt, és írunk hozzá egyedi azonosítót, azaz nevet (name)
Ugyan úgy járunk el, mint a div szakaszoknál, ennek is van, kezdő és záró címkéje.
A div szakaszoknál, id vagy class osztályazonosító után írjuk be az azonosító nevét.
A form szakasznál, name és id azonosító után írjuk be, az azonosító nevet.
<input type="......." name="a" id="a" value=8 size=12> Input ablak megjelenése, ez lesz:
Az input, megjelenít egy ablakot. Jelentése bevitel. Az ablakban valamilyen adatot fogunk megadni, feldolgozás céljából.
A type, beviteli adat típusát határozza meg.
- type="text" Írhatunk számokat és szöveget is. Program, mindent szövegként értelmez.
- type="number" Számérték megadása.
- type="button" Megjelenít egy beviteli nyomógombos ablakot.
- type="reset" Megjelenít egy törlőgombot.
A name, és id az input mező azonosító neve.
Mely a value után megadott értéket veszi fel.
Egy adott input mező name és id azonosító neve, egyforma legyen, és másik input mező, nem rendelkezhet ezzel a névvel.
Feldolgozó szkript, a megadott azonosító név alapján azonosítja, a bevitt adatot.
A value, Érték megadása nem kötelező, idézőjelek közé nem írunk adatot.
De, küldendő értéket vagy megjelenítendő karakert, szöveget, adhatunk meg, mely az inputok típusától függ.
A számértéket nem, de a megjelenítendő szöveget, idézőjelek közé kell beírni.
A size, megjelenő ablak méretét határozza meg, azaz hány karakter jeleníthető meg az ablakban (szám vagy szöveg formájában).
A megadott méretnél írhatunk több karaktert is, programunkat nem befolyásolja, csak, a méret feletti karakterek, nem láthatóak.
(A nem látható karaktereket megnézhetjük, a billentyűzet jobbra vagy balra mutató nyomógombját kell használni.)
<input type="button" value=" Eredményhez katt ide! " onClick="osszeadas(this.form)"> Input ablak megjelenése, ez lesz:
A button, megjelenít egy nyomógombos ablakot
Nyomógombon milyen felirat jelenjen meg, a value után, idézőjelek közé kell beírnunk.
Szélessége a beírt stringek számtól függ. Növelhetjük szélességet úgy is, ha a kezdő idézőjel után többször lenyomjuk a szóközbillentyűt, beírjuk a szöveget, és többször lenyomjuk a szóközbillentyűt, majd jöhet a záró idézőjel.
A value, gombon megjelnő szöveg. A nyomógombbon megjelenítendő szöveget, idézőjelek közé kell beírni.
Az onClick, eseménykezelő. Ha a button gombra kattintunk, akkor az eseménykezelő után beírt azonosító név (osszeadas) alatti feladat hajtódjon végre a JavaScript programunkban
A this, (Ez) kulcsszó. Minden form objektum meghatározásban használnunk kell.
A this, mindig az aktuális form objektumra hivatkozik.
<input type="reset" value='Adatok törlése.'> Input ablak megjelenése, ez lesz:
A reset gombnak nem kell name és id azonosító, csak a value felírat szöveget kell megadni.
<input type="reset"> Input ablak megjelenése, ez lesz:
Példa:
<body>
<form name="matematika" id="matematika"> <input type="number" name="a" id="a" value=8 size=6> + <input type="number" name="b" id="b" value=2 size=6> = <input type="text" name="eredmeny" id="eredmeny" value=' ' size=15> <br><br> <input type="button" value="Eredményhez katt ide!" onClick="osszeadas(this.form)"> <input type="reset" value='Adat törlése.'> </form>
<script> function osszeadas(form) { a=eval(form.a.value) b=eval(form.b.value) x=a+b form.eredmeny.value = x } </script>
</body>
Megjegyzés:
Az inputokat, teljesen mindegy milyen sorrendben írjuk meg, vagyis az első input is szerepelhetne utolsóként, programunk akkor is megfelelően hajtja végre feladatát.
Egy a lényeg, olyan sorrendbe írjuk őket egymás után, hogy weblapunkon történő megjelenésükkor, minden felhasználónak egyértelmű legyen, hogy mit is kell csinálnia ezen kis programmal.