Ez a dokumentum egy előző változata!
A JavaScriptet eredetileg Mocha néven hozták létre 1995-ben, de emlegették Netscape Scripting Language néven is. A nyelv a Java programozási nyelven alapszik, de attól jóval szerényebb lehetőségekkel rendelkezik. A HTML 2.0 és 3.0 ajánlások idején a weblapok interaktivitása kimerült a linkekben és elküdhető táblázatokban. Nem volt JavaScript és Java. A Mocha-t később átnevezték LiveScript-re, amelyből lett a JavaScript. A JavaScript név felvétele után lett leginkább hasonló a Java szintaktikájához.
Manapság szokás az ECMA script egy dialektusaként beszélni róla. Az ECMAScript a JavaScript(Netscape) és a JScript(Microsoft) által létrehozott nyelvekből alkotott szabvány. A szabványosítást a Netscape kezdeményezte 1996-ban, az első ECMAScript szabvány 1997-ben jelent meg. A jelenlegi utolsó, hármas számú változat 1999-ben jelent meg.
Az anyagrész feldolgozásához a következők ismerete szükséges:
A JavaScript beilleszthető a weboldal forrásába, de külön állományban is tarthatjuk, ugyanakkor megvalósítható egy tagen belül is. Ha egy weboldalon az adott tagen belül valósítjuk meg, akkor inline javascriptről beszélünk. A weblapon belül „script” elemek közé helyezett kód esetén internal javascriptről beszélünk. Ha külön állományba tesszük a kódot, akkor external javascriptről beszélünk.
A következőkben ezekre látunk egy-egy példát.
A JavaScript soron belül az adott objektumnál van megvalósítva.
Internal megvalósítás esetén a JavaScript kódot állományon belül hozzuk létre. Ez lehet a HTML fej vagy törzs része egyaránt.
A JavaScriptet külön állományban is megvalósíthatjuk. Ezt nevezzük External megvalósításnak. A HTML oldalon csak egy hivatkozást teszünk az adott JavaScript állományra.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>SWBin</title> <script src="script.js"></script> </head> <body> <button onclick="csinald()">Indul</button> </body> </html>
function csinald() { alert('Helló Világ'); }
Ha JavaScript kódunk olyan karaktereket is tartalmaz, amely majd a weboldalon megjelenhet, akkor szükség lehet a kódolás megadására. Ezt a script elem charset tulajdonságával adhatjuk meg.
<script src="myscripts.js" charset="UTF-8"></script>
A JavaScript kiviteli felülete a böngésző. Három lehetőségünk van.
A konzol nem az a felület, ami alapértelmezésként megjelenik egy böngészőben. A console a fejlesztők felülete, amely általában F12 billentyűvel jeleníthető meg.
console.log("Szöveg a konzolra");
A párbeszédablak sem az alapértelmezett megjelenési felület. A párbeszéd ablak viszont ehhez a felülethez tartozik, tulajdonképpen egy felugró ablak.
alert("Szöveg párbeszédablakban");
A JavaScript segítségével írhatunk az adott weboldalra, amely azonban törli a többi tartalmat.
document.write("Szöveg weblapra");
A weboldalra persze több módon is írhatunk. Írhatunk adott elemek közzé, csak valahogy azonosítani kell azt az elemet, amelynek tartalmát szeretnénk megváltoztatni.
Egy HTML elem tartalmának írása azonosító alapján:
document.getElementById("azonosito").innerHTML = "Szöveg HTML elembe";
Az első p elem tartalmának írása:
document.getElementsByTagName("p")[0].innerHTML="Az első p elem tartalma";
Jó kérdés, hogy a konzolt hol látjuk? Chrome böngészőben, Shift+Ctrl+i vagy csak F12. Firefox böngészőben Shift+Ctrl+k, de ha telepítve van a Firebug plugin akkor ott is használható az F12.
Ha egy karaktersorozatot küldök a böngészőbe, akkor azt mindig idézőjelek közzé írom, amelyek megjelennek a weboldalon, vagy egy párbeszédablakban vagy a konzolon. Egyes karaktereknek lehet speciális jelentése is. A speciális jelentést a (\) karakter jelzi. Ha például az (n) betűnek szeretnék speciális jelentést adni, akkor elé írok egy vissza-perjelet:
\n
Az n betű helyett egy sortörés íródik a HTML oldal forrásába.
\n | sortörés |
\t | tabulátor |
\' | aposztróf |
\„ | idézőjel |
\\ | vissza-perjel |
\b | Backspace |
\xXX | Latin-1 karakter hexadecimális értékkel megadva. |
\uXXXX | Unicode karakter hexadecimális értékkel megadva. |
JavaScriptben a következő típusok vannak:
A típusokat a változók használata előtt nem kell megadni.
A változónevek kezdődhetnek betűvel (a-z vagy A-Z) vagy '_' (alulvonás) karakterrel. Ez után számok is előfordulhatnak a változónévben.
Változó két módon hozható létre
A var kulcsszó használata nem kötelező.
"alma" 'körte'
Mind a kettő helyes
Ha számokat karaktersorozatként tárolunk, műveleteket akkor is végezhetünk velük.
Az állandókat a const kulcsszóval vezetjük be és szokás szerint nagybetűvel írjuk őket.
const MAX = 500;
const USER_ID = 10;
const EGYIK_ALLANDO = 0, MASIK_ALLANDO=1;
Miért foglaltak? Mert nem használhatjuk őket azonosítóként, mivel a JavaScript már használja ezeket.
abstract boolean break byte case catch char class const continue debugger default delete do double else enum export extends false final finally float for function goto if implements import in instanceof int interface long native new null package private protected public return short static super switch synchronized this throw throws transient true try typeof var volatile void while with
+ | Összeadás |
- | Kivonás |
* | Szorzás |
/ | Osztás |
% | Maradékképzés |
++ | Emelés |
-- | Csökkentés |
Operátor | Példa | Egyezik ezzel |
---|---|---|
= | x = y | |
+= | x += y | x = x + y |
-= | x -= y | x = x - y |
*= | x *= y | x = x * y |
/= | x /= y | x = x / y |
%= | x /= y | x = x % y |
var osszeg = 3 + 2;
Vagy
var a = 3; var b = 2; var osszeg = a + b;
Az eredmény: 5
De nézzük, azt az esetet amikor bekérjük a számokat.
var a = window.prompt("Szám1: "); var b = window.prompt("Szám2: "); var osszeg = (a + b); alert(osszeg);
Ha bemenőparaméternek megadunk 3 és 2-őt, a fenti esetben az „osszeg” változó értéke 32 és nem 5, mivel karaktersorozatként értelmezi a JavaScript. Ezért konvertálnunk kell számmá. Erre a parseInt és parseFloat függvények használhatók:
var a = window.prompt("Szám1: "); var b = window.prompt("Szám2: "); var osszeg = (parseInt(a) + parseInt(b)); alert(osszeg);
var egy = 1; var zero = 0; console.info(egy || zero); console.info(egy && zero);
Az első info() 1-gyel tér vissza, a második 0-val.
console.info(egy && ot);
Visszatér 5-tel.
Egy típusos nyelv esetén hibát ad a következő:
var a = 14 + "alma";
A JavaScript nyelvben a 14 karaktersorozatként hozzáadódik az alma szóhoz.
És mi történik ebben az esetben:
var a = 14 + 5 + "alma";
A JavaScript balról jobbra értékeli ki a kifejezést. Először két számmal találkozik, ezért számként összeadja azokat; megkapjuk a 19-t. A 19 már karaktersorozatként adódik az „alma” szóhoz.
Az eredmény:
19alma
A következő példában a számok a karaktersorozat után találhatók:
var a = "alma" + 14 + 5;
Mivel elsőként egy karaktersorozattal találkozik az értelmező, ezért a 14 és az 5-s értéket is karaktersorozatként értelmezi. Az eredmény:
alma145
Ha létrehozunk egy változót, később többféle típust elhelyezhetünk benne.
var a; a = 145; a = "alma";
A példánkban, létrehoztunk egy a változót, majd egy számot helyezünk el benne, a 145-t. Az utolsó sorban karaktersorozatot helyezünk el benne.
A karaktersorozat állandót két módon is megadhatom.
var gyumolcs = "alma"; var gyumolcs = 'alma';
Beágyazás:
var mondat1 = "alma a 'teremtésben'"; var mondat2 = 'alma a "teremtésben"';
var szam = 38.00; //tizedesjegyek (decimals) var szam = 38; //tizedesjegyek nélkül
Nagy számok:
var szam1 = 25e4; // 250000 var szam2 = 25e-4; // 0.0025
var a = 5; var b = 5; var c = 8; (a == b) // az eredmény true (a == c) // az eredmény false
var gyumolcsok = ['alma', 'körte', 'barack'];
var dolgozo = { nev:'Nagy János', telepules:'Szolnok', fizetes:8500000' };
Nézzük meg mit ad vissza a typeof operátor az egyes esetekben.
typeof ""; //string typeof "alma" //string
typeof 0 //szám -- number typeof 95 //szám -- number typeof 9.5 //szám -- number typeof (3) //szám -- number typeof (5 + 6) //szám -- number
var szam; //értéke undefined
Bármely változó értéke kiüríthető az undefined értékkel:
szam = undefined;
Az üres érték egy karaktersorozat karakter nélkül, de nincs köze a az undefined értékhez.
var str = "";
A JavaScriptben a null érték a következőt jelenti: semmi. Nem szerencsés, de a JavaScriptben a null típusa objektum.
var dolgozo = {nev:"Nagy János", telepules:"Szolnok", fizetes:8500000}; dolgozo = null;
A dolgozó értéke végül null, de még mindig objektum.
Ha megvizsgáljuk az typeof operátorral:
typeof undefined // undefined typeof null // object
Hasonlítsuk össze egymással:
null === undefined // false null == undefined // true
Primitív adatértékek:
Komplex adatértékek:
var a=2489.8237; console.log(a.toFixed(3)); // 2489.824 (kerekítés felfelé) console.log(a.toFixed(2)); // 2489.82 console.log(a.toFixed(7)); // 2489.8237000 (helykitöltés)
var a = 123.45; console.log(a.toPrecision(6)); // 123.450 (helykitöltés) console.log(a.toPrecision(4)); // 123.5 (kerekítés felfelé) console.log(a.toPrecision(2)); // 1.2e+2 (a formátum túlcsordult)
A JavaScriptben elérhető egy Math nevű objektum, több állandóval és függvénnyel.
document.write(Math.PI)
document.write(Math.sin(1))
A Math objektum mezői:
Tulajdonság | Leírás |
---|---|
E | Visszatér az Euler féle számállandóval (kb. 2.718) |
LN2 | Visszatér 2 természetes logaritmusával (kb. 0.693) |
LN10 | Visszatér 10 természetes logaritmusával (kb. 2.302 |
LOG2E | Visszatér E kettes alapú logaritmusával (kb. 1.442 |
LOG10E | Visszatér E tízes alapú logratimusával (kb. 0.434 |
PI | Visszatér PI érétkével (kb. 3.14) |
SQRT1_2 | Vissztér 1/2 négyzetgyökével (kb. 0.707 |
SQRT2 | Visszatér kettő négyzetgyökével (kb. 1.414) |
A Math objektum metódusai:
Metódus | Leírás |
---|---|
abs(x) | Visszatér x abszolútértékével |
acos(x) | Visszatér x arkusz koszinuszával (x-et radiánban várja) |
asin(x) | Visszatér x arkusz szinuszával (x-et radiánban várja) |
atan(x) | Visszatér x arksuz tangensével; a szám -PI/2 – és PI/2 közötti szám radiánban |
atan2(y,x) | Visszatér az argumentum hányadosának arkusz tangensével |
ceil(x) | Visszatér x felkerekített értékével |
cos(x) | Visszatér x koszinuszával (x-et radiánban várja) |
exp(x) | Vissztér x exponenciális alakjával |
floor(x) | Visszatér x lefelekerekített egész alakjával |
log(x) | Visszatér x E alapú természetese logaritmussal |
max(a,b,c,…,n) | Visszatér a legnagyobb értékkel |
min(a,b,c,…,n) | Visszatér a legkisebb értékkel |
pow(x,y) | Visszatér x y hatványával |
random() | Visszatér egy 0 és 1 közötti számmal |
round(x) | Visszatér x legközelebbi egészre kerekített értékével |
sin(x) | Visszatér x szinuszával (x-et radiánban várja) |
sqrt(x) | Visszatér x négyzetgyökével |
tan(x) | Visszatér x szög tangensével |
1 és 5 közötti véletlenszám:
var szam = Math.floor((Math.random() * 5)+1); alert(szam);
Tízes alapú logaritmus:
function log10(val) { return Math.log(val) / Math.LN10; }
Ügyeljünk arra, hogy amikor valaki azt mondja logaritmus, általában a tízes alapú logaritmusra gondol.
var nev = window.prompt("Neved: ");
Bevitel természetesen lehetséges űrlapok segítségével is.
<div id="megerosites"></div> <button onclick="megerosit()">Megerősítés</button> <script> function megerosit() { var res = confirm('Megerősíted?'); if(res == true) document.getElementById("megerosites").innerHTML = "Megerősítve"; else document.getElementById("megerosites").innerHTML = "Elvetve"; } </script>
if (feltétel) { //törzs }
if (feltétel) { //törzs } else { //törzs }
if (feltétel1) { //utasítások } else if (feltétel2) { //utasítások } else { //utasítások }
var a = 35 var b = 20 if(a>b) document.write("Az a nagyobb") else document.write("A b nagyobb")
if(1) console.info("Ez a szöveg megjelenik");
var a = ""; if(!a) console.info("Ez a szöveg is megjelenik");
var a = "szilva"; if(a) console.info("Ez a szöveg is megjelenik");
switch(n) { case 1 : utasítás1; break; case 2 : utasítás2; break; case 3 : utasítás3; break; default: alapértelmezett_utasítás; }
for (kezdőérték; feltétel; növekmény) { //ciklustörzs }
for(i=0; i<10;i++) document.write("Ez az<br>")
while (állítás) { //ciklus törzse }
do { //ciklustörzs } while (állítás);
<div id="e"></div> <script> var t = [3, 5, 6, 4, 8]; for(i in t){ var e = document.getElementById("e"); e.innerHTML = e.innerHTML + " " + t[i]; } </script>
document.write(parseFloat('1.45kg')); //Eredmény: 1.45 document.write(parseFloat('0.1e6')); //Eredmény: 100000 document.write(parseFloat('123.45')); //Eredmény: 123.45 document.write(parseFloat('0123.45')); //Eredmény: 123.45 document.write(parseFloat('0x123.45')); //Eredmény: 0 document.write(parseFloat('.45')); //Eredmény: 0.45 document.write(parseInt('1.45kg')); //Eredmény: 1 document.write(parseInt('123.45')); //Eredmény: 123 document.write(parseInt('123')); //Eredmény: 123 document.write(parseInt('0123', 10)); //Eredmény: 123 document.write(parseInt('123.45')); //Eredmény: 123 document.write(parseInt('12', 8)); //Eredmény: 10 (= 2 + 1*8) document.write(parseInt('012')); //Eredmény: 10 (= 2 + 1*8) document.write(parseInt('0xff')); //Eredmény: 255 (= 15 + 15*16) document.write(parseInt('ff', 16));//Eredmény: 255 (= 15 + 15*16) document.write(parseInt('ff', 10)); //Eredmény: NaN document.write(parseInt('0.1e6')); //Eredmény: 0 document.write(parseInt('ZZ', 36)); //Eredmény: 1295 (= 35 + 35*36)
var a = 3.5; var logikai = Boolean(a);
Számértékek | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
-1.7 | -0 | +0 | 1 | 1.6 | 8 | 16 | 16.8 | 123e-2 | Infinity | +Infinity | NaN |
true | false | false | true | true | true | true | true | true | true | true | false |
Karaktersorozat | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
”„ üres string | ”-1.6„ | „0” | „1” | „1.6” | „8” | „16” | „16.8” | „123e-2” | „010” Oktális | „0x10” (Hex) | „0xFF” (Hex) | ”-010„ | ”-0x10„ | „xx” | |
false | true | true | true | true | true | true | true | true | true | true | true | true | true | true |
Más érték | |||||
---|---|---|---|---|---|
undefined | null | true | false | new Object() | function(){ return; } |
false | false | true | false | true | true |
A String objektumban egy szövegdarabot tudunk tárolni és manipulálni.
String objektumot a new String() segítségével készíthetek.
Szintaxis:
var txt = new String("szöveg");
Vagy egyszerűen csak így:
var txt = "szöveg";
String objektumok tulajdonságai:
Tulajdonság | Leírás |
---|---|
constructor | Hivatkozás egy konstruktorra. |
length | Egy string hosszát tartalmazza. |
prototype | Lehetővé teszi tulajdonság vagy metódus hozzáadását egy objektumhoz. |
String objektumok metódusai
Metódus | Leírás |
---|---|
charAt() | Egy karakter az adott pozícióról |
charCodeAt() | A karakter unicode-ja adott pozícióról |
concat() | Kettő vagy több string összefűzése |
fromCharCode() | Unicode érték karakterré konvertálása |
indexOf() | Az adott paraméter első előfordulását adja vissza |
lastIndexOf() | Az adott paraméter utolsó előfordulását adja vissza |
match() | Szöveg illeszkedésének vizsgálata |
replace() | Szöveg helyettesítése. Amit helyettesítünk regexel adjuk meg |
search() | A szabályos kifejezés által jelölt szöveg első előfordulását adja vissza. |
slice() | Veszi egy karaktersorozat részét, majd visszatér egy karaktersorozattal. |
split() | Stringet alrészekre bont, és tömbben helyezi el. |
substr() | Visszaadja egy karaktersorozat részét, adott pozíciótól, adott számú karaktert. |
substring() | Visszaadja egy karaktersorozat részét, adott két pozíció között. |
toLowerCase() | Minden betűt kisbetűssé alakít |
toUpperCase() | Minden betűt nagybetűssé alakít |
valueOf() | A String objektum primitív értékével tér vissza |
Mi a különbség a slice(), substring és a substr() között?
String.slice( kezdet [, vég ] ) String.substring( innen [, eddig ] ) String.substr( kezdet [, hossz ] )
String HTML burkoló metódusok
A HTML burkoló metódusok visszatérnek a HTML elemmel
Metódus | Leírás |
---|---|
anchor() | Egy horgony létrehozása |
big() | A szöveget big típusú fontként jeleníti meg |
blink() | Vilogtatja a stringet |
bold() | Félkövér szöveg |
fixed() | Fix méretű fontok megjelenítése |
fontcolor() | A megadott színnel jeleníti meg a szöveget |
fontsize() | A font mérete |
italics() | Dőlt típus |
link() | Hiperlinket csinál a szövegből |
small() | A szöveg small típusú |
strike() | Áthúzott szöveg |
sub() | Alsóindexben a szöveg |
sup() | Felsőindexben a szöveg |
var a = document.getElementById("egy"); a.innerHTML = "tinta".bold();
Egy új metódust adunk a String objektumhoz:
String.prototype.replaceAt=function(index, char) { return this.substring(0, index) + char + this.substring(index+1); }
A replaceAt() metódus adott helyen kicseréli egy karaktert.
Másik változat:
String.prototype.replaceAt=function(index, swap) { return this.substr(0, index) + swap + this.substr(index + swap.length); }
Harmadik megvalósítás:
String.prototype.replaceAt=function(index, char) { str = this.split(''); str[index]=char; str = str.join(''); return str; }
Tartalmazás az includes() függvénnyel:
Böngésző támogatottság | |||||
---|---|---|---|---|---|
Böngésző | Chrome | Firefox | Safari | Opera | Edge |
Verzió: | 41 | 40 | 9 | 28 | 12.0 |
Az am szót tartalmazza az adott karaktersorozat?
var s = "valami"; alert(s.includes("am"));
A 4 indextől kezdve az „am” szöveget tartalmazz az adott karaktersorozat:
var s = "valami"; alert(s.includes("am", 4));
var tomb = new Array() tomb[0] = 3 tomb[1] = 5 tomb[2] = 8
A tömbök indexelése 0-val kezdődik.
Kezdőérték több módon is adható:
var tomb = new Array(3, 5, 8)
var tomb = [3, 5, 8]
var tomb = ["barack", "körte"]; tomb.push("szilva"); tomb.push("alma"); alert(tomb);
Tömbök mérete
A tömbök mérete a length mezővel kérdezhetők le:
var tomb = new Array(3, 8, 5); alert(tomb.length);
Tömbelem kezelése veremként:
var gyumolcs = new Array(); tomb.push("körte"); tomb.push("szilva");
Törlés
delete tomb[2];
Töröltük a második elemet. Az elemek indexe nem változik.
tomb.splice(2, 1);
A második indextől töröltünk egy elemet, az indexek, újragenerálódtak.
A tömbök objektumként is létrehozhatók. Így azonban a fenti függvények és tulajdonságok nem használhatók.
var gyumolcsok = { 0: 'Alma', 1: 'Körte', 2: 'Barack', 3: 'Szilva', 4: 'Málna' } console.log(gyumolcsok[3]);
function kiir() { document.write("A függvény") } kiir()
A függvény meghívható annak deklarálása előtt is:
kiir() function kiir() { document.write("A függvény") }
De meghívható így is:
function kiir() { console.log("Működik") } (kiir)()
Esetleg így:
(function kiir() { console.log("Működik") })();
function getNev() { return "A te neved" } document.write(getNev())
function osszead(szam1, szam2) { return szam1 + szam2 } document.write(osszead(3,5))
Függvényeket létrehozhatunk névtelenül is:
function(){ console.log("működik"); }
Ezt magában viszont nem szokták használni. Vagy beépítjük egy másik függvény paraméterébe, vagy meghívjuk így:
(function(){ console.log("működik"); })();
Ha van paramétere:
(function(uzenet){ console.log(uzenet); })("Működik");
Függvény paramétereként:
function kiir(nev, uzenet) { console.log(uzenet + " " + (nev)()); } kiir(function(){ var nev = "Nagy Béla"; return nev; }, "Üdv");
A fenti példában a kiir függvény első paraméterként egy függvényt vár.
Esetleg átadhatjuk egy mutatónak:
var f = function(){ console.log("Működik"); } f();
A konzolra ír naplóbejegyzést.
document.write("Működik");
Végrehajtás egyszer. Öt másodperc múlva:
setTimeout(function(){ console.log("Működik"); }, 5000);
Végrehajtás periodikusan. Öt másodpercenként:
setInterval(function(){ console.log("Működik"); }, 5000);
Általánosan így írhatjuk le a szintaxist:
setInterval(callback, kesleltetes_millisecben)
Lehetőség van a HTML oldalba egy noscript nevű elemet ágyazni, amelynek tartalma, akkor jelenik meg, ha nem támogatja a böngésző a JavaScripteket, vagy ki van kapcsolva.