Javascript alapok 1

A JavaScripttel többek között online WEB riportokat tudjuk felturbózni, látványosabbá tenni.

Ez scripting language (=parancsleíró nyelv), vagyis voltaképpen egy (leegyszerűsített) programozási nyelv, mellyel interaktívvá, animálttá tehetjük weboldalainkat.

A JavaScriptet a (bonyolultabb) C programozási nyelvből alakították ki. A JS ún. interpretált nyelv, azaz a parancsait a program az erre kifejlesztett program gépi kódra való lefordítás nélkül hajtja végre.

A JS-et általában közvetlenül a HTML-fájlba írjuk bele.

A JS-et bárki ingyenesen használhatja.

JavaScript NEM Java

A Java és a JavaScript két, alapgondolataiban és megjelenésében teljesen eltérő programozási nyelv. A Sun Microsystems által kifejlesztette Java a JS-nél sokkal hatékonyabb és bonyolultabb nyelv, s így inkább a C ill. C++ -hoz hasonló.

A JS a webes fejlesztők programozási eszköze. A HTML-oldalak készítői gyakran nem programozók; így számukra ideális programozási lehetőséget nyújt az igen egyszerű mondattannal rendelkező JavaScript. A JS segítségével tehát a programozáshoz nem értők is bővíthetik néhány „program-töredékkel” weboldalukat.

A JS-tel dinamikus (szöveg)tartalommal tölthetjük fel a weboldalakat. Az alábbihoz hasonló JavaScript-utasításokkal (=statements) az oldal bizonyos (pl. szöveges) elemeinek tartalmát a weboldal aktuális állapotához igazíthatjuk:

document.write(”<h1>” + name + ”</h1>)
A JS-tel az oldal reagálhat bizonyos eseményekre A JS megfelelő beállításával bizonyos történésekhez (pl. az oldal letésének befejeződése, vagy a felhasználó elemre-kattintása) az oldal tartalmának megváltozásában álló választ rendelhetünk.

A JS kezeli (olvassa és felülírja) a HTML-tartalmat A JS működés közben beolvashatja/felhasználhatja ill. módosíthatja egyes HTML-elemek tartalmát.

A JS adatok validálására is használható. A JS segítségvel leellenőrizhetjük a felhasználó által (pl. űrlapon) küldendő adatok helyességét a továbbításuk előtt. A kiszűrt hibás üzenetek nem terhelik feleslegesen a szervert.

A JS felismeri a felhasználó böngészőprogramját. A JS segítségével felismerhetjük a felhasználó böngészőjének típusát, és a szerver az azonos tartalmú, de eltérő böngészők számára készült weboldal-variánsok közül a legmegfelelőbbet továbbíthatja neki.

A JS alkalmas cookie-k létrehozására A JS-segítségével ún. cookie-k formájában adatokat tárolhatunk és kereshetünk vissza a weboldal látogatójának számítógépén/számítógépéről. A (HTTP-/web-/browser-)cookie (=keksz) nem más, mint a webbönglsző által a felhasználó gépén eltárolt szöveg.

Ezt a későbbiekben bejelentkezéseknél, keresési és böngészési javaslatokhoz, bevásárlókosár-tartalom megőrzésére egyaránt felhasználhatjuk, de az éppen látogatott weboldalak tartalmának megőrzésére és a gép váratlan leállását követő visszaállítására is

A JavaScriptet a <script> HTML tag segítségével írhatjuk bele a weboldalba.

JavaScript írása weboldalba Az alábbi példában egy szöveget íratunk ki a weboldalra a JS segítégével:

</body> </html>

A fenti HTML-oldalon csupn a Hello World! szavak olvashatók (idézőjel nélkül). Ha az idézőjeleknek akár csak egyikét is kitöröljük, vagy az utasításban szereplő pontot kettőspontra változtatjuk, a böngésző nem ír ki semmit.

Második példánkban látjuk, hogyan adhatunk HTML-tageket a megjelenítendő tartalomhoz:

</body> </html>

Ebben az esetben a szöveg elsőrendű címsorként jelenik meg.

A példát átalakítva linket is kiírathatunk:

</body> </html>

Mint látszik, az <a> tag attribútum-értékeit (http://www.lap.hu ill. _blank) nem tettük idézőjelbe, mert ellenkező esetben a program megzavarodik, és nem ír ki semmit (ti. maga a JS utasítás értéke is idézőlejben van).

Magyarázat Mint első példánkban láttuk, a JS-nek a dokumentumba ágyazására a <script> tag szolgál, melyben a type attribútummal a parancsnyelv fajtáját is meg kell adnunk. Így a <script type=”text/javascript”> és a </script> tagek jelzik a JS kezdetét és végét a dokumentumban:

</body></html>

A document.write egy standard JS-parancs, mellyel szöveget íratunk ki az oldalra. Hogyha ezt az előbb bemutatott script elembe írjuk, a böngésző JS-parancsként fogja értelmezni, és végrehajtja a parancssort, azaz ebben az esetben kiírja a Hello World! szöveget:

</body> </html>

Hogyha a parancssort nem <script> tagbe írjuk, akkor azt a böngésző egyszerű szöveges tartalomként kezeli, és az egészet kiírja az oldalra. Tehát pl. a következő esetben:

document.write("Hello World!");

</body> </html>

a document.write(”Hello World!”); felirat jelenik meg a képernyőn.

Megoldás az egyszerű böngészők számára A JavaScriptet nem támogató böngészők a JS rendelkezéseket (=statements) az oldal-tartalom részeként jelenítik meg, ami zavarólag hat. Ennek kiküszöbölésére, a JS szabvány értelmében a HTML comment (<!--->) taget alkalmazzuk az elrejtésükre.

Azaz egyszerűen írjunk egy

taget utánuk, így:

</script>

</body> </html>

A két, jobbra dőlő perjel a comment-záró tag előtt a JS-megjegyzések jelölése, azaz az ezen jelek közé írt rendelkezéseket a program nem veszi figyelembe.

A HTML comment-lezáró tag elé írt kettős perjel értelmében a JavaScript az oldal teljes további tartalmát megjegyzésként kezeli, és nem hajtja végre.

A JavaScript elhelyezése a weboldalban:

Belső JavaScriptek:

A HTML-oldalba írt JavaScripteket a böngésző az oldal betöltésekor azonnal végrehajtja; a függvényekbe írt kódot viszont csak a függvény meghívásakor.

JS-rendelkezések a <head> részben A csak meghívásra indítandó függvény-parancssorokat a <head> részbe írjuk; hogy elkülönítsük a szövegtestbe írt, azonnal végrehajtandó JS-től, ill. hogy már meghívásuk előtt betöltse őket a böngésző..

JS-rendelkezések a <body> részben Hogyha a parancsunkat nem szükséges függvényként (késleltetve) végrehajtatnunk, akkor a dokumentum <body> részében célszerű elhelyeznünk

A dokumentumban tetszőleges számú scriptet helyezhetünk el, a fejrészben és a szövegtestben egyaránt, azaz mind a szövegtestbe, mind a fejrészbe írt JS-ek hibátlanul működnek, nem zavarják egymást!

Külső JavaScriptek:

Adott esetben (ha annak tartalma megfelelő), a JS-et egy külső, .js kiterjesztésű fájlként is hozzáadhatjuk a weboldalhoz. A külső JS fájl csak JS-rendelkezéseket tartalmazhat, tageket és egyéb elemeket vagy szöveget nem. Ezért a <script></script> tageket se írjuk bele!

Hivatkozás külső JS-re:

<script type="text/javascript" src="URL.js"></script>

A <script> taget, habár tartalmat nem írunk bele, továbbra is ugyanott kell elhelyezni, ahová belső JS-ként beírnánk!

Scriptek: Oldalbetöltés (=onload) esemény/attribútum:

<elem onload=”függvény-név()” />

Függvény: function függvény-név (paraméter1,paraméter2) { végrehajtandó_kód; } Figyelmeztető-ablak: alert(”Üzenet”);

A JS a böngésző által végrehajtandó rendelkezések (azaz parancsoknak és azok értékeinek) sorozata.

A JavaScript esetfüggő A HTML-lel szemben a JS esetfüggő, ezért fokozottan ügyelnünk kell a nagy-és kisbetűk következetes használatára a JS-et alkotó kijelentések, (kijelölendő vagy meghívandó) változók, objektumok és függvények írásakor.

JavaScript rendelkezések (statements) A JS-rendelkezések nem egyebek, mint a böngészőnek szóló utasítások, azaz a teendők meghatározásai.

Pl. az alábbi rendelkezés értelmében a böngészőnek meg kell jelenítenie a Hello Dolly feliratot a weboldalon:

document.write("Hello Dolly");

A rendelkezések végére általában pontosvesszőt írunk. Ez bevett és elismert gyakorlat a programozók között, az Interneten számos helyen találkozhatunk vele.

A JS szabványnak a rendelkezések pontosvesszővel való elválasztása csak kiegészítő eleme, mivel a böngészők e szabvány szerint a sortöréseket (entereket) tekintik az egyes rendelkezések végének. Így minden egyes rendelkezést külön sorba kellene írni.

A pontosvesszők használatával nemcsak könnyebben olvashatóvá, elkülöníthetőbbé válnak az egyes rendelkezések, hanem egy sorba többet is írhatunk belőlük.

JavaScript kód A JavaScript-kód vagy egyszerűbben JavaScript JS-rendelkezések sorozata. Ezeket a böngésző az oldalán elfoglalt helyük sorrendjében hajtja végre. Következő példánkban egy címsort és két bekezdést íratunk ki a weboldalra:

<html> <body>
<script type="text/javascript"> document.write("<p>This is a paragraph.</p>"); </script>
<script type="text/javascript"> document.write("<h1>This is a heading</h1>"); document.write("<p>This is another paragraph.</p>"); </script>
</body> </html>

Mint látjuk, itt a címsor a két bekezdés között található. Hogyha a pontosvesszőket kitöröljük, a kód továbbra is működik, de hogyha ezután a sortöréseket megszüntetjük és az egyes rendelkezéseket enterek helyett csak szóközök választják el, a böngésző nem képes kiírni a szöveget.

JavaScript – tömbök A JS-rendelkezéseket ún. tömbökbe csoportosíthatjuk, melyeket kapcsos zárójelekkel jelölünk. A tömbbe tartozó rendelkezéseket a böngésző egyszerre hatja végre.

A következő példában ugyancsak címsort és bekezdéseket íratunk ki a weboldalra:

<html> <body>
<script type="text/javascript"> {
document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); } </script>
</body> </html>

Példánk nem túl tanulságos, csupán a tömbbe zárás mondattanát mutatja be, mely a CSS-meghatározásaok csoportosításával analóg. A rendelkezéseket leggyakrabban akkor csoportosítjuk, ha egy függvénybe (=function) vagy feltételbe (=condition) szeretnénk őket csoportosan beírni.

A függvényekről és feltételekről (mely utóbbi teljesülése esetén a rendelkezések adott csoportját a program végrehajtja) a későbbi fejezetekben lesz szó.

JavaScript – rendelkezések: A JS-rendelkezések a böngészőnek szóló utasítások. Sortörések vagy pontosvesszők választhatják el őket a kódban.

A rendelkezéseket tömbökbe csoportosíthatjuk, amelyek elején ill végén kapcsos zárójelek állnak. A tömbbe zárt kódot (pl. egy függvény vagy feltételes rendelkezés értékeként) a böngésző a többitől elkülönítve, egységként hajtja végre.

A JS esetfüggő, ezért fokozottan ügyelnünk kell a nagy-és kisbetűk következetes használatára!
V. JavaScript – megjegyzések A JS-megjegyzéseket a kód olvashatóbbá tételére használjuk.

JavaScript – megjegyzések A JS-megjegyzések a JS-kód magyarázatára vagy áttekinthetőségének növelésére szolgálnak. Az egysoros megjegyzések kettős perjellel (//) kezdődnek

Az alábbi példában egysoros megjegyzésekkel magyarázzuk a kódot:

<html> <body>
<script type="text/javascript"> // Write a heading document.write("<h1>This is a heading</h1>"); // Write two paragraphs: document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); </script>
</body> </html>

Mint látjuk, az egysoros megjegyzések használatának kulcsa, hogy a böngésző a JavaScript rendelkezéseit soronként értelmezi, így a megjegyéseink nem szorulnak külön lezáró jelre, hiszen a kód új sorban folytatódik.

Többsoros JavaScript-megjegyzések A többsoros JS-megjegyzések /*-gal kezdődnek és */-re végződnek, a CSS-megjegyzésekhez hasonlóan.

Alábbi példánk rendelkezéseihez többsoros magyarázatot fűztünk:

<html> <body>
<script type="text/javascript"> /* The code below will write one heading and two paragraphs */ document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); </script>
</body> </html>

Végrehajtás-gátló megjegyzés-jelek Az alábbi példában a megjegyzés-jelet egy rendelkezés végrehajtásának meggátlására, azaz kvázi a rendelzekés „kikapcsolására” használjuk. A megjegyzés-jelek ilyetén használata az oldalak hibáinak kijavításakor (=debugging) szokásos.

<html> <body>
<script type="text/javascript"> //document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); </script>
</body> </html>

Ebben az esetben tehát a címsor nem látszik, mert a megjelenítésére vonatkozó rendelkezést a böngésző egy egysoros megjegyzésnek tekinti.

Többsoros rendelkezések vagy rendelkezés-tömbök kikapcsolására szabatosan a többsoros megjegyzésjelet alkalmazzuk:

<html> <body>
<script type="text/javascript"> /* document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>");*/ document.write("<p>This is another paragraph.</p>"); </script>
</body> </html>

Itt csak az utolsó bekezdés kerül megjelenítésre.

Sorvégi megjegyzések Következő példánk megjegyzéseit a rendelkezések után, a sorvégekre írtuk, így azok nem foglalnak el külön sorokat:

<html> <body>
<script type="text/javascript"> document.write("Hello"); // Write "Hello" document.write(" Dolly!"); // Write " Dolly!" </script>
</body> </html>

Az oladl tartalma itt is Hello Dolly!

JavaScript – megjegyzések: A JS-megjegzéseket jegyzeteknek a kódba írásához vagy a kód egyes részeinek „kikapcsolásához”/érvénytelenítéséhez használjuk a szerkesztés vagy javítás során.

Egysoros megjegyzés: //Megjegyzés Többsoros megjegyzés: /*Megjegyzés Megjegyzés*/ Sorvégi megjegyzés (nem foglal el külön sort): kód; //Megjegyzés
VI. JavaScript – változók A változók (=variables) a JS információ-tároló részei.

Algebrai változók Az iskolai algebrából emlékezhetünk a következőhöz hasonló összefüggésekre: x=5, y=6, z=x+y
Ezekben a betűkhöz (pl. az x) bizonyos értéket (pl. 5) társítva a művelet végeredménye (z = 11) kiszámíthatóvá válik.

Az említett betűket változóknak (=variables) nevezik, melyek bizonyos értékekre (pl. x = 5) illetve összefüggésekre (pl. z=x+y), azaz végső soron információkra utalhatnak.

JavaScript – változók Az algebrai változókhoz hasonlóan a JS változói is értékeket ill. összefüggéseket takarnak.

Tetszőleges elnevezésekkel illethetjük őket, mint amilyen az x, illetve jellegzetesebbekkel is, mint pl. a carname.

A JS-változók elnevezésekor két szabályt kell betartanunk: 1. A JS-változó – nevek, mint minden JS-elem, esetfüggők, azaz pl. az y és az Y két külön változót jelöl. 2. A változó-neveknek betűvel vagy aláhúzás-karakterrel (_) kell kezdődniük.

Egy gyors példa A változók értéke a parancssor végrehajtása közben változhat. Az aktuális érték behívása ill. megváltoztatása egyaránt az érték-névre való hivatkozással történik, mint azt példánk mutatja:

<html> <body>
<script type="text/javascript">
var firstname;
firstname="Hege";
document.write(firstname);
document.write("<br />"); firstname="Tove"; document.write(firstname);
</script>
<p>The script above declares a variable, assigns a value to it, displays the value, changes the value, and displays the value again.</p>
</body> </html>

ONLINE matek függvény elemező linkek:

https://www.wolframalpha.com/

https://www.geogebra.org/m/awahVlZy#material/s1ZwTMKZ

https://www.symbolab.com/solver

https://www.mathway.com

https://www.numberempire.com

www.emathhelp.net

IT, BI, DWH, DM, AI

Keresés ebben a blogban