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-ás verzió óta ismeri a JavaScriptet, vagy a Microsoft Internet Explorer (3.0 vagy nagyobb verzió), így a legtöbb ember képes JavaScriptet futtatni.
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.
Gomb alkalmazása és form alkalmazása
<form>
<input type="button" value="Kattints rám!" onClick="alert('Hello!')">
</form>
Gombok használata, háttér színezése gombnyomásra
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- A kód elrejtése, ha szükséges
function sarga(){
document.bgColor="#FFFF00";
}
function kek(){
document.bgColor="#0000FF";
}
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>
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
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.
Összeadás függvénnyel
function szamol_1(x,y){
var eredmeny = x + y;
document.write("<H3>"+x+" + "+y+" = "+eredmeny+"</H3><BR>");
}
Űrlap kitöltése ellenőrzése javascripttel
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- A JavaScript kód elrejtése
function uresCheck(mezo){
if (mezo.value != "") return true;
else{
alert("Meg ures mezo!");
return false;
}
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<P>
<FORM NAME="form_ures">
<INPUT TYPE="text" NAME="ures" SIZE="20">
<INPUT TYPE="button" VALUE="Ellenorizd"
onClick="uresCheck(form_ures.ures)">
</FORM>
</BODY>
</HTML>
Email cím formai ellenőrzése javascripttel
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- A JavaScript kód elrejtése
function emailCheck(mezo){
szoveg = mezo.value;
if (!(szoveg.indexOf('@')>0 && szoveg.indexOf('@')<szoveg.length-1)){
alert("Rossz e-mail cim!");
return false;
}
else{
alert("Formailag helyes e-mail cim!");
return true;
}
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<P>
<FORM NAME="form_email">
<INPUT TYPE="text" NAME="email" SIZE="20">
<INPUT TYPE="button" VALUE="Ellenorizd"
onClick="emailCheck(form_email.email)">
</FORM>
</BODY>
</HTML>
Űrlap matematikai értékének ellenőrzése. Csak pozitív egész számot fogad el.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- A JavaScript kód elrejtése
function uresCheck(mezo){
if (mezo.value != "") return true;
else{
alert("Üres mezõ!");
return false;
}
}
function teszt(adat,minta){
for (var i=0; i<adat.length; i++)
if (minta.indexOf(adat.charAt(i)) == -1)
return false;
return true;
}
function numerikusCheck(mezo){
if (!uresCheck(mezo)) return false;
if (!teszt(mezo.value,"1234567890")){
alert("Ez nem numerikus érték!");
return false;
}
else{
alert("Ez helyes érték!");
return true;
}
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<P>
<FORM NAME="form_numerikus">
<INPUT TYPE="text" NAME="numerikus" SIZE="20">
<INPUT TYPE="button" VALUE="Ellenõrizd"
onClick="numerikusCheck(form_numerikus.numerikus)">
</FORM>
</BODY>
</HTML>
Telefonszám ellenőrzése
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- A JavaScript kód elrejtése
function uresCheck(mezo){
if (mezo.value != "") return true;
else{
alert("Üres mezõ!");
return false;
}
}
function teszt(adat,minta){
for (var i=0; i<adat.length; i++)
if (minta.indexOf(adat.charAt(i)) == -1)
return false;
return true;
}
function tartalmaz(adat,minta){
for (var i=0; i<adat.length; i++)
if (minta.indexOf(adat.charAt(i)) != -1)
return true;
return false;
}
function telefonCheck(mezo){
if (!uresCheck(mezo)) return false;
if (!teszt(mezo.value,"1234567890()/- ") ||
!tartalmaz(mezo.value,"1234567890")){
alert("Ez nem jó telefonszám!");
return false;
}
else{
alert("Ez helyes telefonszámnak tûnik!");
return true;
}
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<P>
<FORM NAME="form_telefon">
<INPUT TYPE="text" NAME="telefon" SIZE="20">
<INPUT TYPE="button" VALUE="Ellenõrizd"
onClick="telefonCheck(form_telefon.telefon)">
</FORM>
</BODY>
</HTML>
Választó függvény aktív lesz amelyik nem 0
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- A JavaScript kód elrejtése
var aktualis = 0;
function fokusz_allitas(){
if (aktualis == 0){
document.select_form.text1.focus();
document.select_form.text1.select();
}
else{
document.select_form.text2.focus();
document.select_form.text2.select();
}
aktualis = 1 - aktualis;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="select_form">
<INPUT TYPE="text" NAME="text1" VALUE="Az elsõ mezõ" SIZE="15"><BR>
<INPUT TYPE="text" NAME="text2" VALUE="A második mezõ" SIZE="15"><BR>
<INPUT TYPE="button" VALUE="Fókuszállítás" onClick="fokusz_allitas()">
</FORM>
</BODY>
</HTML>
Űrlap kitöltése után elküldés egy megadott emailcímre
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- A JavaScript kód elrejtése
function uresCheck(mezo){
if (mezo.value != "") return true;
else{
alert("A(z) "+ mezo.name +" mezõ üres!");
return false;
}
}
function emailCheck(mezo){
var szoveg = mezo.value;
if (!(szoveg.indexOf('@')>0 && szoveg.indexOf('@')<szoveg.length-1)){
alert("Rossz e-mail cím!");
return false;
}
else return true;
}
function teszt(adat,minta){
for (var i=0; i<adat.length; i++)
if (minta.indexOf(adat.charAt(i)) == -1)
return false;
return true;
}
function numerikusCheck(mezo){
if (!uresCheck(mezo)) return false;
if (!teszt(mezo.value,"1234567890")){
alert("Ez nem numerikus érték!");
return false;
}
else return true;
}
function tartalmaz(adat,minta){
for (var i=0; i<adat.length; i++)
if (minta.indexOf(adat.charAt(i)) != -1)
return true;
return false;
}
function telefonCheck(mezo){
if (!uresCheck(mezo)) return false;
if (!teszt(mezo.value,"1234567890()/- ") ||
!tartalmaz(mezo.value,"1234567890")){
alert("Ez nem jó telefonszám!");
return false;
}
else return true;
}
function ellenoriz(){
if (uresCheck(document.form.nev) &&
numerikusCheck(document.form.ev) &&
telefonCheck(document.form.telefon) &&
emailCheck(document.form.email)){
document.form.action = "mailto:"+document.form.email.value;
return true;
}
else return false;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form" ACTION="dummy" ENCTYPE="text/plain"
onSubmit="return ellenoriz()">
Neved?<BR><INPUT TYPE="text" NAME="nev" SIZE="20">
<P>Hany eves vagy?
<BR><INPUT TYPE="text" NAME="ev" SIZE="20">
<P>Telefonszám ellenõrzése:
<BR><INPUT TYPE="text" NAME="telefon" SIZE="20">
<P>Az urlap a kovetkezo e-mail cimre lesz elkuldve...
<BR><INPUT TYPE="text" NAME="email" SIZE="20">
<P><INPUT TYPE="submit" NAME="submit" VALUE="Elküld">
</FORM>
</BODY>
</HTML>
Névszerinti üdvözlés függvénnyel és űrlappal
<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>
Új érték gombnyomásra
<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>
Új oldal betöltése gombnyomásra
<FORM>
<INPUT TYPE="button" VALUE="Altavista"
onClick="location.href='http://altavista.com';">
</FORM>
Weboldal felosztása keretekkel %-osan
<HTML>
<FRAMESET ROWS="50%,*">
<FRAMESET COLS="33%,33%,*">
<FRAME SRC="pld035.htm">
<FRAME SRC="pld035.htm">
<FRAME SRC="pld035.htm">
</FRAMESET>
<FRAMESET COLS="50%,*">
<FRAME SRC="pld035.htm">
<FRAME SRC="pld035.htm">
</FRAMESET>
</FRAMESET>
</HTML>
csak bele kell irányítani a html oldalt
<HTML>
<FRAMESET ROWS="50%,*">
<FRAME SRC="pld032.htm" NAME="keret1">
<FRAME SRC="pld033.htm" NAME="keret2">
</FRAMESET>
</HTML>
felosztás és feltöltés
<HTML>
<FRAMESET ROWS="50%,*">
<FRAME SRC="pld037.htm" NAME="menu">
<FRAMESET COLS="50%,*">
<FRAME SRC="pld038.htm" NAME="dokumentum1">
<FRAME SRC="pld039.htm" NAME="dokumentum2">
</FRAMESET>
</FRAMESET>
</HTML>
Menü készítése
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Elrejtés
function betolt(url, keret){
if (keret == "dokumentum1") parent.dokumentum1.location.href=url;
else parent.dokumentum2.location.href=url;
}
function betolt2(elso_url, masodik_url){
betolt(elso_url, 'dokumentum1');
betolt(masodik_url, 'dokumentum2');
}
function szincsere(ujszin, keret){
if (keret == "dokumentum1")
parent.dokumentum1.document.bgColor=ujszin;
else
parent.dokumentum2.document.bgColor=ujszin;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<H1>Menü</H1>
<A HREF="javascript:betolt('pld0310.htm','dokumentum1')">Betölt egy
új dokumentumot az elsõ keretbe</A><BR>
<A HREF="javascript:betolt('pld0310.htm','dokumentum2')">Betölt egy
új dokumentumot a második keretbe</A><BR>
<A HREF="javascript:szincsere('#00FFFF','dokumentum1')">Háttérszín
cseréje az elsõ keretben</A><BR>
<A HREF="javascript:szincsere('#FFFF00','dokumentum2')">Háttérszín
cseréje a második keretben</A><BR>
<A HREF="javascript:betolt2('pld0311.htm','pld0311.htm')">Dokumentum
betöltése egyszerre két keretbe</A><BR>
</CENTER>
</BODY>
</HTML>
Ablak létrehozása
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- JavaScript kód elrejtése
function ujablak(){
ablak = open("pld041.htm");
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Új ablak nyitása" onClick="ujablak()">
</FORM>
</BODY>
</HTML>
Új ablak megnyitása
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- JavaScript kód elrejtése
function ujablak2(){
ablak = open("pld041.htm", "uj_ablak",
"width=300,height=200,status=no,menubar=no");
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Módosított ablak nyitása"
onClick="ujablak2()">
</FORM>
</BODY>
</HTML>
Ablak bezárása
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- JavaScript kód elrejtése
function bezar(){
close();
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<CENTER>
<INPUT TYPE="button" VALUE="Zárj be!" onClick="bezar()">
</CENTER>
</FORM>
</BODY>
</HTML>
Html szerkesztő script
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- A JavaScript kód elrejtése
function ujablak3(){
ujablak = open("","uj_ablak3",
"width=400,height=300,status=yes,toolbar=yes,menubar=yes");
ujablak.document.open();
ujablak.document.write("<HTML><HEAD><TITLE>Dokumentum ");
ujablak.document.write("készítése JavaScript-tel</TITLE>");
ujablak.document.write("</HEAD>");
ujablak.document.write("<BODY><CENTER><H1>");
ujablak.document.write("Ezt az oldalt teljesen a JavaScript ");
ujablak.document.write("hozta létre!");
ujablak.document.write("</H1></CENTER></BODY>");
ujablak.document.write("</HTML>");
ujablak.document.close();
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<FORM>
<INPUT TYPE="button" VALUE="Dokumentum készítése JavaScript-tel"
onClick="ujablak3()">
</FORM>
</CENTER>
</BODY>
</HTML>
Elõször nézzük meg az ujablak3() nevû függvényt. Megnyitottunk egy új böngészõ ablakot a már megismert open() függvénnyel. Azonban vegyük észre, hogy az elsõ paraméternek nem adtunk értéket (""), ez azt jelenti, hogy nem kívánunk betölteni HTML oldalt, hanem azt JavaScript-el akarjuk létrehozni. Az ujablak nevû változóval, amit most definiáltunk, hozzáférhetünk a megnyitott ablakunkhoz (fontos megjegyezni azt, hogy ennél a feladatnál nem használható az ablaknak adott uj_ablak3 név). Az ablak megnyitása után meg kell nyitnunk a dokumentumot. Ezt az alábbi sor csinálja:
ujablak.document.open();
Azaz meghívtuk a document objektum open() metódusát. Ezt ne keverjük össze a window objektum open() függvényével! Az ujablak változót ki kell tenni a document.open() elé, mert csak így érhetjük el az ablakunkat. A függvényben a következõ sorok hozzák létre a tényleges oldalt:
ujablak.document.write("<HTML><HEAD><TITLE>Dokumentum ");
ujablak.document.write("készítése JavaScript-tel</TITLE>");
ujablak.document.write("</HEAD>");
ujablak.document.write("<BODY><CENTER><H1>");
ujablak.document.write("Ezt az oldalt teljesen a JavaScript ");
ujablak.document.write("hozta létre!");
ujablak.document.write("</H1></CENTER></BODY>");
ujablak.document.write("</HTML>");
Amint az látható, egyszerû HTML elemeket írtunk a dokumentumunkba a document.write() függvény segítségével. Ide természetesen bármilyen más HTML elem írható. Miután ilyen módon megírtuk a dokumentumunkat, le is kell zárni azt:
ujablak.document.close();
A példa azt mutatta be, hogy milyen módon lehet dokumentumot létrehozni új ablakba JavaScript segítségével. Új ablak helyett választhatunk tetszõleges keretet is. Tegyük fel, hogy már rendelkezünk keret1 és keret2 nevû keretekkel, és dokumentumot akarunk létrehozni a keret2-be! Ezt megtehetjük a következõ módon:
parent.keret2.document.open(); // a dokumentum megnyitása a keret2-ben
parent.keret2.document.write(" ... Ide kerül a HTML kód ... ");
parent.keret2.document.close(); // a dokumentum bezárása a keret2-ben
Időzités
A Timeout-ok (késleltetés)
A régebbi böngészõk még nem ismerik az onMouseOver eseményt, hiszen az még nem szerepel a JavaScript 1.0-ban. Ha azt akarjuk, hogy a fenti programot ezen böngészõkön is lehessen futtatni, akkor helyettesíteni kell ezt az eseményt valami mással. Például írjuk ki a szöveget az állapotsorba, és hagyjuk ott valamennyi ideig. Ezt késleltetés (timeout) révén érjük el, ami azt jelenti, hogy a számítógép valamely kódot bizonyos idõ elteltével fog csak végrehajtani. A következõ példa létrehoz egy gombot, ami átváltja a háttérszínt, majd 3 másodperc múlva visszavált az eredetire.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- A JavaScript kód elrejtése
function idozit(){
document.bgColor="#0000FF";
setTimeout("document.bgColor='#FFFFFF'",3000);
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<FORM>
<INPUT TYPE="button" VALUE="Háttérszín cseréje 3 mp-ig"
onClick="idozit()">
</FORM>
</CENTER>
</BODY>
</HTML>
