A javascript a <script> és </script> HTML tag-ek közé kerül.
A javascriptben a kis és a nagybetűk különbözőek. A parancsokat pontosvessző választja el egymástól.
Változók
Változó megadása:
valtozo = 123;
Műveletek változókkal:
a = b + c;
Ha b és c értéke szöveg (string), az "a" változó ezekek összefűzött értékét tárolja, ha szám, akkor összegüket.
Kiírás a HTML oldalra
A javascript a document.write paranccsal ír ki karaktersorokat (sztring) és változókat a weboldalra. A sztringeket mindig idézőjelbe kell tenni. A kiírható sztringek HTML formázások is lehetnek. Lehetőség van egyszerre sztringeket és változókat is kiíratni, ezek közé + jelet kell tenni. Pl:
document.write("<b>" + a + " + " + b + " = " + valtozo + "</b><br>")
Függvények
Függvényt a function paranccsal lehet definiálni, a függvény megadása (függvénytörzs) kapcsos zárójelek közt található. Pl:
function osszead(x,y)
{
var eredmeny = x + y;
alert(x + " + " + y + " = " + eredmeny);
}
Ez a függvény későbbi használatakor a megadott x és y változókat összeadja, majd felpattanó ablakban kiírja az összeadást. A függvényt így lehet használni a program egy másik részében:
osszead(3,8);
Függvény definiálásakor meghatározható, hogy a számított értéket csak adja ki a return segítségével.
function osszead2(x,y){
return x+y;
}
Ilyenkor a függvény így használható:
document.write("<b>24 + 4 = " + osszead2(24,4) + "</b>");
Űrlapelemek kezelése
A HTML részben lévő űrlapelemek értékeivel végezhet műveleteket a javascript. HTML Űrlap elemek
Beviteli mezők
Az űrlapelem: <form name="x"><input ame="y"></form>
Az érték lekérdezése: document.x.y.value (a beírt szöveg)
Példa:
<form name="x"><input name="y">
<input type="button" value="próba" onClick="alert('beírás: ' + document.x.y.value)">
</form>
Checkbox kezelése
Az űrlapelem: <form name="a"><input type="checkbox" name="b"></form>
Az érték lekérdezése: document.a.b.checked (TRUE vagy FALSE értéke lehet)
Példa:
<form name="a"><input type="checkbox" name="b">
<input type="button" value="próba" onClick="if(document.a.b.checked) alert('kiválasztva!'); else alert('nincs kiválasztva!')">
</form>
Listaválasztó kezelése
Az űrlapelem: <form name="c"><select name="d"><option value="egy">Első választás</option></form>
Az értékek lekérdezése:
document.c.d.selectedIndex - megadja a kiválasztott elem sorszámát a listáról
document.c.d.options[3].text - megadja a lista 3. eleméhez írt szöveget (az <> és </option> közötti részt)
document.c.d.options[3].value - megadja a lista 3. eleméhez tartozó értéket
Példa:
<script>
function valasztas(){
alert(document.c.d.options[document.c.d.selectedIndex].text)
}
</script>
<form name="c">
<select name="d" onChange="valasztas()">
<option>Első választás</option>
<option>Második választás</option>
<option>Harmadik választás</option>
<option>Negyedik választás</option>
</select>
</form>
Eseménykezelők
Az űrlapelemekhez, szöveghez, képekhez html-ben rendelhető eseménykezelők: onAbort onBlur onClick onDblClick onFocus onMouseDown onMouseOut onMouseOver onMouseUp onMove onReset onSelect onSubmit onChange
A <body> tagbe helyezhető eseménykezelők: onKeyPress onKeyUp onKeyDown onLoad onUnload onResize onMouseMove onError onDragDrop onBlur
Háttérszín megváltoztatása
<script>
function hatter(szin) {
document.bgColor = szin;
}
</script>
<form>
<input type="button" value="kék" onClick="hatter('blue')">
<input type="button" value="piros" onClick="hatter('red')">
<input type="button" value="zöld" onClick="hatter('green')">
</form>
Alapműveletek
<form name="szamol">
<input name="egy"><br>
<input type="button" value=" + " onClick="plusz()">
<input type="button" value=" - " onClick="minusz()">
<input type="button" value=" * " onClick="szor()">
<input type="button" value=" / " onClick="oszt()"><br>
<input name="ketto"><p>
Eredmény: <input name="eredmeny">
</form>
<script>
function plusz() {
document.szamol.eredmeny.value = document.szamol.egy.value *1 + document.szamol.ketto.value * 1;
}
function minusz() {
document.szamol.eredmeny.value = document.szamol.egy.value - document.szamol.ketto.value;
}
function szor() {
document.szamol.eredmeny.value = document.szamol.egy.value * document.szamol.ketto.value;
}
function oszt() {
document.szamol.eredmeny.value = document.szamol.egy.value / document.szamol.ketto.value;
}
</script>
Html ismétlése
A HTML részei
A <body> tagben lévő paraméterek
A szín kódok
#RRGGBB - piros (RR), zöld (GG) és kék (BB) összetevő, mindengyik érték 00 és ff között lehet, ez 0 és 255 közötti értéket jelent.
Kép elhelyezése
<img src="kepfajlneve.jpg">
Az <img> tagben lévő további paraméterek:
Link készítése
<a href="weboldal.html" target="keret1">Szöveg vagy kép, amire kattintani lehet</a>
A target értékei lehetnek még: _top = a keretek fölé tölt, _blank = új böngésző-ablakba, _self = önmagába, _parent = a felette lévő keretes szerkezetbe tölt.
Betűformázó utasítások
<b>bold</b>
<i>italic</i>
<u>underline</u>
<font color="#ff00ff" size="4">Erre a szövegre vonatkozik a formázás</font>
A <frame> paraméterei
A javascriptben a kis és a nagybetűk különbözőek. A parancsokat pontosvessző választja el egymástól.
Változók
Változó megadása:
valtozo = 123;
Műveletek változókkal:
a = b + c;
Ha b és c értéke szöveg (string), az "a" változó ezekek összefűzött értékét tárolja, ha szám, akkor összegüket.
Kiírás a HTML oldalra
A javascript a document.write paranccsal ír ki karaktersorokat (sztring) és változókat a weboldalra. A sztringeket mindig idézőjelbe kell tenni. A kiírható sztringek HTML formázások is lehetnek. Lehetőség van egyszerre sztringeket és változókat is kiíratni, ezek közé + jelet kell tenni. Pl:
document.write("<b>" + a + " + " + b + " = " + valtozo + "</b><br>")
Függvények
Függvényt a function paranccsal lehet definiálni, a függvény megadása (függvénytörzs) kapcsos zárójelek közt található. Pl:
function osszead(x,y)
{
var eredmeny = x + y;
alert(x + " + " + y + " = " + eredmeny);
}
Ez a függvény későbbi használatakor a megadott x és y változókat összeadja, majd felpattanó ablakban kiírja az összeadást. A függvényt így lehet használni a program egy másik részében:
osszead(3,8);
Függvény definiálásakor meghatározható, hogy a számított értéket csak adja ki a return segítségével.
function osszead2(x,y){
return x+y;
}
Ilyenkor a függvény így használható:
document.write("<b>24 + 4 = " + osszead2(24,4) + "</b>");
Űrlapelemek kezelése
A HTML részben lévő űrlapelemek értékeivel végezhet műveleteket a javascript. HTML Űrlap elemek
Beviteli mezők
Az űrlapelem: <form name="x"><input ame="y"></form>
Az érték lekérdezése: document.x.y.value (a beírt szöveg)
Példa:
<form name="x"><input name="y">
<input type="button" value="próba" onClick="alert('beírás: ' + document.x.y.value)">
</form>
Checkbox kezelése
Az űrlapelem: <form name="a"><input type="checkbox" name="b"></form>
Az érték lekérdezése: document.a.b.checked (TRUE vagy FALSE értéke lehet)
Példa:
<form name="a"><input type="checkbox" name="b">
<input type="button" value="próba" onClick="if(document.a.b.checked) alert('kiválasztva!'); else alert('nincs kiválasztva!')">
</form>
Listaválasztó kezelése
Az űrlapelem: <form name="c"><select name="d"><option value="egy">Első választás</option></form>
Az értékek lekérdezése:
document.c.d.selectedIndex - megadja a kiválasztott elem sorszámát a listáról
document.c.d.options[3].text - megadja a lista 3. eleméhez írt szöveget (az <> és </option> közötti részt)
document.c.d.options[3].value - megadja a lista 3. eleméhez tartozó értéket
Példa:
<script>
function valasztas(){
alert(document.c.d.options[document.c.d.selectedIndex].text)
}
</script>
<form name="c">
<select name="d" onChange="valasztas()">
<option>Első választás</option>
<option>Második választás</option>
<option>Harmadik választás</option>
<option>Negyedik választás</option>
</select>
</form>
Eseménykezelők
Az űrlapelemekhez, szöveghez, képekhez html-ben rendelhető eseménykezelők: onAbort onBlur onClick onDblClick onFocus onMouseDown onMouseOut onMouseOver onMouseUp onMove onReset onSelect onSubmit onChange
A <body> tagbe helyezhető eseménykezelők: onKeyPress onKeyUp onKeyDown onLoad onUnload onResize onMouseMove onError onDragDrop onBlur
Háttérszín megváltoztatása
<script>
function hatter(szin) {
document.bgColor = szin;
}
</script>
<form>
<input type="button" value="kék" onClick="hatter('blue')">
<input type="button" value="piros" onClick="hatter('red')">
<input type="button" value="zöld" onClick="hatter('green')">
</form>
Alapműveletek
<form name="szamol">
<input name="egy"><br>
<input type="button" value=" + " onClick="plusz()">
<input type="button" value=" - " onClick="minusz()">
<input type="button" value=" * " onClick="szor()">
<input type="button" value=" / " onClick="oszt()"><br>
<input name="ketto"><p>
Eredmény: <input name="eredmeny">
</form>
<script>
function plusz() {
document.szamol.eredmeny.value = document.szamol.egy.value *1 + document.szamol.ketto.value * 1;
}
function minusz() {
document.szamol.eredmeny.value = document.szamol.egy.value - document.szamol.ketto.value;
}
function szor() {
document.szamol.eredmeny.value = document.szamol.egy.value * document.szamol.ketto.value;
}
function oszt() {
document.szamol.eredmeny.value = document.szamol.egy.value / document.szamol.ketto.value;
}
</script>
Html ismétlése
A HTML részei
| <html> <head> <title>Az oldal címe</title> </head> <body> A weboldal tartalma </body> </html> |
* ez jelzi a html formázások kezdetét * megnyitja a weboldal fejlécét - információk kezdete * a weboldal címe * bezárja a weboldal fejlécét * megnyitja a weboldal tartalmi részét * bezárja * bezárja a html formázásokat |
|
bgcolor="#000000"
|
a háttérszín megadása
|
|
text="#000000"
|
a szöveg színe
|
|
link="#000000"
|
a link szövegének színe
|
|
vlink="#000000"
|
a már meglátogatott link szövegének színe
|
|
alink="#000000"
|
az éppen aktivizált (rákattintás) link szövegének színe
|
|
background="back.gif"
|
a háttérben lévő kép
|
#RRGGBB - piros (RR), zöld (GG) és kék (BB) összetevő, mindengyik érték 00 és ff között lehet, ez 0 és 255 közötti értéket jelent.
Kép elhelyezése
<img src="kepfajlneve.jpg">
Az <img> tagben lévő további paraméterek:
|
align=top
|
függőleges elrendezés (top, middle, bottom)
|
|
alt="szöveg"
|
szöveg megjelenése a kép helyén
|
|
width=100
|
a kép szélessége
|
|
height=200
|
a kép magassága
|
|
border=3
|
a kép keretének szélessége
|
<a href="weboldal.html" target="keret1">Szöveg vagy kép, amire kattintani lehet</a>
A target értékei lehetnek még: _top = a keretek fölé tölt, _blank = új böngésző-ablakba, _self = önmagába, _parent = a felette lévő keretes szerkezetbe tölt.
Betűformázó utasítások
<b>bold</b>
<i>italic</i>
<u>underline</u>
<font color="#ff00ff" size="4">Erre a szövegre vonatkozik a formázás</font>
| size="4" | a betű mérete |
|
size=+2
|
a betűméret változtatása az előzőhöz képest
|
|
color="#ff00ff"
|
a betű színe
|
|
face ="Arial"
|
a betűtípus megadása
|
Bekezdés
<p align="right">Ez jobbra igazított bekezdés lenne</p>
<br>Ez után új sor kezdődik.
<p>Ez is új sor, de egyben új bekezdés</p>
<h1>Ez főcím jellegű bekezdés</h1>
<h2>Ez alcím jellegű bekezdés</h2>
<br>Ez után új sor kezdődik.
<p>Ez is új sor, de egyben új bekezdés</p>
<h1>Ez főcím jellegű bekezdés</h1>
<h2>Ez alcím jellegű bekezdés</h2>
Táblázat
<table> - táblázat nyitása
</table> - táblázat zárása
</table> - táblázat zárása
A <table> paraméterei
|
border=1
|
a táblázat keretének vastagsága
|
|
bgcolor="#000000"
|
a táblázat háttérszínének megadása
|
|
cellpadding=5
|
a cellán belül a szöveg távolsága a cella szélétől
|
|
cellspacing=7
|
a cellák egymástól való távolsága
|
|
width=80%
|
a táblázat szélessége %-ban, vagy pixelben (ha % nélkül
szerepel)
|
<tr> - sor kezdődik </tr> - sor zárul
A <tr> és a </tr> között vannak a cellák, a cellatartalom <td>
és </td> között helyezkedik el.
Példa
<table border="1" width="100%" >
<tr>
<td>első</td><td>második</td>
</tr>
<tr>
<td>harmadik</td><td>negyedik</td>
</tr>
</table>
<tr>
<td>első</td><td>második</td>
</tr>
<tr>
<td>harmadik</td><td>negyedik</td>
</tr>
</table>
A cella <td> paraméterei
|
align=right
|
elrendezés (right, left, center)
|
|
valign=top
|
függőleges elrendezés (top, center, bottom)
|
|
bgcolor="000000"
|
a cella háttérszínének megadása
|
|
colspan=2
|
hány vízszintes cellát foglaljon el a cella
|
|
rowspan=3
|
hány függőleges cellát foglaljon el a cella
|
|
width=80%
|
a cella szélessége %-ban, vagy pixelben (ha % nélkül
szerepel)
|
Keretes szerkezet
3 weboldalt tartalmazó keretes szerkezet mintája
<frameset cols="150,*">
<frame name="bal" scrolling="no" noresize src="lap1.htm">
<frameset rows="20%,*">
<frame name="jobbfelső" src="lap2.htm">
<frame name="jobbalsó" src="lap3.htm">
</frameset>
</frameset>
<frame name="bal" scrolling="no" noresize src="lap1.htm">
<frameset rows="20%,*">
<frame name="jobbfelső" src="lap2.htm">
<frame name="jobbalsó" src="lap3.htm">
</frameset>
</frameset>
A <frameset> paraméterei
|
rows="50%,50%"
|
keretes web-lap szerkesztése. Vízszintes felbontás.
Megadható %-ban és pixelben is.
|
|
cols="100,50,*"
|
függőleges felbontás
|
|
frame
|
src="index1.htm"
|
az egyik keret tartalma
|
|
frame
|
noresize
|
a keretek széle nem elmozdítható
|
|
frame
|
scrolling=no
|
a lapgörgetés megakadályozása
|
|
frame
|
name="egyik"
|
a keret elnevezése
|
|
frame
|
border=0
|
a keret határolóvonalának szélessége
|
| <form name="urlap" action="oldal.php"> <input name="adat" size="15"> <textarea name="szoveg" rows="4" cols="10"></textarea> <input type="radio" name="valasztas" value="igen"> Igen<br> <input type="checkbox" name="valasztas" value="férfi"> Férfi<br> <input type="button" value="KATT" onClick="utasitas()"> <input type="submit" value="MEHET"> <input type="cancel" value="TÖRLÉS"> <select name="valaszto" size="1"> <option value="elso">ELSŐ</option> <option selected value="masodik">MÁSODIK</option> </select> |
* Űrlap megnyitása, neve és submit esetén az
adattovábbítás helye * Beviteli mező, neve és mérete * Többsoros szövegdoboz, neve, magassága és szélessége karakterben * Rádió gomb, neve, értéke. Azonos nevű rádiógombok közül egyet választani lehet. * Választó gomb, neve, értéke. Ki és bekapcsolni lehet. * Nyomógomb, felirata és a kattintáshoz rendelt javascript utasítás * Az űrlap adatait továbbító gomb és felirata * Az űrlap adatait törlő gomb és felirata* Legördülő lista választó. A size érték megadja, hogy gördítés nélkül hány elem látható. * Az első választás * A második választás, előre kijelölve * Legördülő lista zárás |
Nincsenek megjegyzések:
Megjegyzés küldése