034.1 Lecke 1
Tanúsítvány: |
Web Development Essentials |
---|---|
Verzió: |
1.0 |
Témakör: |
034 JavaScript programozás |
Fejezet: |
034.1 JavaScript végrehajtás és szintaxis |
Lecke: |
1/1 |
Bevezetés
A weboldalakat három standard technológia segítségével fejlesztik: HTML, CSS és JavaScript. A JavaScript egy olyan programozási nyelv, ami lehetővé teszi, hogy a böngésző dinamikusan frissítse a weboldal tartalmát. A JavaScriptet általában ugyanaz a böngésző hajtja végre, amelyikben a weboldal van megnyitva. Ez azt jelenti, hogy a CSS-hez és a HTML-hez hasonlóan az általunk írt kód pontos viselkedése böngészőnként eltérő lehet. A legtöbb elterjedt böngésző azonban betartja a ECMAScript specifikáció szabványt. Ez a szabvány egységesíti a JavaScript használatát a weben, és ez lesz a lecke alapja, a HTML5 specifikáció szabványhoz hasonlóan, amely meghatározza, hogy hogyan kell a JavaScriptet a weboldalba helyezni ahhoz, hogy a böngésző le tudja futtatni. === JavaScript futtatása a böngészőben
A JavaScript futtatásához a böngészőnek a kódot vagy közvetlenül, a weboldalt alkotó HTML részeként, vagy egy olyan URL-címként kell megkapnia, amely a végrehajtandó szkript helyét jelzi.
A következő példa azt mutatja be, hogy hogyan lehet kódot közvetlenül a HTML-fájlba illeszteni:
<html>
<head>
</head>
<body>
<h1>A weboldal címsora</h1>
<p>Tartalom</p>
<script>
console.log('teszt');
</script>
</body>
</html>
A kódot a <script>
és a </script>
tagek közé rakjuk. Mindent, ami ezen címkék között van, a böngésző hajtja végre közvetlenül az oldal betöltődésekor.
A <script>
elem oldalon belüli pozíciója határozza meg, hogy mikor kerül végrehajtásra. A HTML-dokumentum felülről lefelé kerül feldolgozásra, és a böngésző dönti el, hogy mikor jeleníti meg az elemeket a képernyőn. Az imént bemutatott példában a weboldal <h1>
és <p>
tagjei a szkript futása előtt kerülnek feldolgozásra és valószínűleg megjelenítésre. Ha a <script>
tagben lévő JavaScript-kód végrehajtása nagyon sokáig tartana, az oldal akkor is gond nélkül megjelenne. Ha azonban a szkript a többi tag fölé került volna, akkor a weboldal látogatója nem látná az oldalt és várnia kellene, amíg a szkript végrehajtása befejeződik. Emiatt a <script>
címkéket általában két helyen helyezik el:
-
A HTML törzs (body) legvégén, hogy a szkript legyen az utolsó végrehajtásra kerülő dolog. Ezt akkor használjuk, ha a kód olyasmit ad hozzá az oldalhoz, ami a tartalom nélkül nem lenne hasznos. Ilyen például egy gomb valamilyen funkcióval való kiegészítése, mivel a gombnak léteznie kell ahhoz, hogy a funkciónak értelme legyen.
-
A HTML
<head>
elemén belül. Ez azt biztosítja, hogy a szkript a HTML törzse előtt végrehajtásra kerül. Ha meg akarjuk változtatni az oldal betöltődési viselkedését, vagy van valami, amit akkor kell végrehajtani, amikor az oldal még nem töltődött be teljesen, akkor ide helyezhetjük a szkriptet. Hasznos lehet még akkor is, ha több olyan szkriptünk van, amely egy adott szkripttől függenek, akkor ezt a közös szkriptet a headbe helyezzük, ezzel biztosítva, hogy az a többi szkript előtt végrehajtásra kerüljön.
Számos okból, például a kezelhetőség miatt hasznos lehet, ha a JavaScript-kódot a HTML-kódon kívüli, különálló fájlokban helyezzük el. A külső JavaScript-fájlokat a <script>
taggel és az src
attribútummal lehet bevonni, az alábbi módon:
<html>
<head>
<script src="/button-interaction.js"></script>
</head>
<body>
</body>
</html>
Az src
tag megadja a böngészőnek a forrás, azaz a JavaScript kódot tartalmazó fájl helyét. A hely lehet egy fájl ugyanazon a szerveren, mint a fenti példában, vagy bármilyen, a weben elérhető URL, például a https://www.lpi.org/example.js
. Az src
attribútum értéke ugyanazt a konvenciót követi, mint a CSS- vagy képfájlok importálása esetén, azaz lehet relatív vagy abszolút. A src
attribútummal ellátott tag használatakor a böngésző HTTP GET
kéréssel próbálja elérni a forrásfájlt, ezért a külső fájloknak mindig elérhetőnek kell lenniük.
Ha az src
attribútumot használjuk, a HTML specifikáció szerint a <script>…</script>
címkék között elhelyezett bármilyen kód vagy szöveg ignorálva lesz.
<html>
<head>
<script src="/button-interaction.js">
console.log("teszt"); // <-- Ez ignorálva van
</script>
</head>
<body>
</body>
</html>
A script
taghez más attribútumokat is hozzáadhatunk, amelyekkel még pontosabban meghatározhatjuk, hogy a böngésző hogyan kapja meg a fájlokat, és hogyan kezelje azokat utána. A következő lista részletesen ismerteti a fontosabb attribútumokat:
async
-
A
script
tagek esetén használható, utasítja a böngészőt, hogy a szkriptet a háttérben hívja le, hogy ne blokkolja az oldal betöltési folyamatát. Az oldal betöltése még mindig megszakad, miután a böngésző megszerezte a szkriptet, mert a böngészőnek fel kell dolgoznia, ez pedig a szkript teljes lekérése után azonnal megtörténik. Ez az attribútum boolean, így a taget így kell írni:<script async src="/script.js"></script>
, nem kell értéket megadni. defer
-
Ez az
async
-hez hasonlóan utasítja a böngészőt, hogy ne blokkolja az oldal betöltési folyamatát a szkript lekérése közben, ahelyett, hogy a böngésző elhalasztaná a szkript feldolgozását. A böngésző megvárja, amíg a teljes HTML-dokumentum feldolgozása megtörténik és ezután feldolgozza a szkriptet is, mielőtt jelentené, hogy a dokumentum teljesen betöltődött. Azasync
-hez hasonlóan adefer
is egy Boolean attribútum, és ugyanúgy használható. Mivel adefer
azasync
-re is utal, nem célszerű a két taget együtt megadni.NoteAmikor egy oldal feldolgozása kész, a böngésző a
DOMContentLoaded
esemény elindításával jelzi, hogy készen áll a megjelenítésre, amikor a látogató képes lesz a dokumentum megtekintésére. Így a<head>
-ben szereplő JavaScriptnek mindig van esélye arra, hogy az oldal megjelenése előtt cselekedjen, még akkor is, ha adefer
attribútumot is tartalmazza. type
-
Megjelöli, hogy a böngésző milyen típusú szkriptet várjon el a címkén belül. Az alapértelmezett érték JavaScript (
type="application/javascript"
), így erre az attribútumra nincs szükség, ha JavaScript kódot tartalmaz, vagy ha azsrc
címke JavaScript erőforrásra mutat. Általában minden MIME-típus megadható, de a böngésző csak a JavaScriptként megjelölt szkripteket fogja végrehajtani. Ennek az attribútumnak két reális felhasználási esete van: a böngészőnek meg kell mondani, hogy ne hajtsa végre a szkriptet atype
tetszőleges értékre, példáultemplate
vagyother
értékre állításával; vagy megmondani a böngészőnek, hogy a szkript egy ES6 modul. Ebben a leckében nem foglalkozunk az ES6 modulokkal.
Warning
|
Ha több |
Konzol a böngészőben
Bár általában egy weboldal részeként fut, van egy másik módja is a JavaScript futtatásának: a böngésző konzolján keresztül. Minden modern asztali böngésző biztosít egy olyan menüt, amelyen keresztül a böngésző JavaScript-motorjában JavaScript-kódot lehet végrehajtani. Ez általában új kód tesztelésére vagy meglévő webhelyek hibakeresésére szolgál.
A böngésző konzoljához a böngészőtől függően többféleképpen lehet hozzáférni, de a legegyszerűbb mód a billentyűparancsok használata. Az alábbiakban a jelenleg használt böngészők gyorsbillentyűi következnek:
- Chrome
-
Ctrl+Shift+J (Cmd+Option+J Mac esetén)
- Firefox
-
Ctrl+Shift+K (Cmd+Option+K Mac esetén)
- Safari
-
Ctrl+Shift+? (Cmd+Option+? Mac esetén)
Kattinthatunk továbbá az egér jobb gombjával a weboldalra és a “Vizsgálat” vagy “Elem vizsgálata” opciót választva megnyithatjuk az inpesctort, ami egy másik böngészőbeli eszköz. Az inspector megnyitásakor egy új panel jelenik meg. Ezen a panelen kiválaszhatjuk a “Console” fület, ami a böngésző konzolját jeleníti meg.
Miután előhívtuk a konzolt, a JavaScriptet közvetlenül a beviteli mezőbe írva hajthatjuk végre az oldalon. A végrehajtott kód eredménye külön sorban jelenik meg.
JavaScript utasítások
Most, hogy már tudjuk, hogyan kezdjük el a parancsfájlok végrehajtását, foglalkozzunk a parancsfájlok tényleges végrehajtásának alapjaival. Egy JavaScript szkript utasítások és blokkok gyűjteménye. Egy egyszerű példa erre a következő utasítás: console.log('teszt')
. Ez arra utasítja a böngészőt, hogy a teszt
szót írja ki a böngésző konzoljára.
A JavaScriptben minden utasítást pontosvessző (;
) zár. Ez azt jelzi a böngészőnek, hogy az utasítás befejeződött és kezdődhez egy új. Nézzük az alábbi szkriptet:
var message = "test"; console.log(message);
Két utasítást írtunk. Minden utasítás vagy pontosvessővel, vagy a szkript végével ér véget. Az olvashatóság érdekében az utasításokat külön sorokba is tehetjük. Így a szkriptet így is írhatnánk:
var message = "test";
console.log(message);
Ez azért lehetséges, mert az utasítások közötti üres helyek, például a szóközök, új sorok vagy tabulátorok figyelmen kívül maradnak. A szóköz gyakran az utasításokon belüli egyes kulcsszavak közé is beilleszthető, de ezt egy következő leckében bővebben kifejtjük. Az utasítások lehetnek üresek is, vagy állhatnak akár csak üres szóközökből.
Ha egy utasítás azért érvénytelen, mert nincs a végén pontosvessző, az ECMAScript egy összetett szabályrendszer alapján megkísérli automatikusan beilleszteni a megfelelő helyre a pontosvesszőt. A legfontosabb szabály a következő: ha egy érvénytelen utasítás két érvényes utasításból áll, amelyeket új sor választ el egymástól, az új sor elé pontosvesszőt kell beilleszteni. Például a következő kód nem érvényes utasítás:
console.log("helló")
console.log("világ")
Egy modern böngésző azonban automatikusan úgy fogja végrehajtani, mintha helyesen, pontosvesszőkkel íródott volna:
console.log("helló");
console.log("világ");
Így bizonyos esetekben lehetséges a pontosvessző elhagyása. Mivel azonban az automatikus pontosvessző-betoldás szabályai összetettek, azt tanácsoljuk, hogy a nem kívánt hibák elkerülése érdekében mindig megfelelően zárjuk le az állításokat.
JavaScript kommentek
A nagy szkriptek elég bonyolultak lehetnek. Érdemes lehet kommentelni, amit írunk, hogy a jövőben könnyebben olvashatóvá tegyük a szkriptet mások vagy saját magunk számára. Lehetséges az is, hogy a szkriptben metainformációkat is szeretnénk feltüntetni, például szerzői jogi adatokat, vagy információt arról, hogy mikor és miért íródott a szkript.
Az ilyen metainformációk beillesztését lehetővé teszi a JavaScript a kommentezés funkcióval. A fejlesztő a szkriptbe speciális karaktereket illeszthet, amelyek kommentként jelölnek meg bizonyos részeket, és amelyek a végrehajtáskor kihagyásra kerülnek. Az alábbiakban a korábban látott szkript erősen kommentezett változata látható.
/*
Ezt a szkriptet a lecke szerzője írta 2020 májusában.
Pontosan ugyanaz a hatása, mint a előző szkriptnek, de kommenteket is tartalmaz.
*/
// Először meghatározunk egy üzenetet.
var message = "teszt";
console.log(message); // Majd kiírjuk az üzenetet a konzolra.
A kommentek nem utasítások, nem kell őket pontosvesszővel lezárni. Ehelyett saját befejezési szabályaik vannak, attól függően, hogy a komment milyen módon van megírva. JavaScriptben kétféleképpen írhatunk kommenteket:
Többsoros komment:
A /*
és a */
használatával jelezhetjük a többsoros kommentek kezdetét és végét. A /*
után a */
első előfordulásáig minden figyelmen kívül marad. Ezt a fajta megjegyzést általában több soron átívelő megjegyzésekhez használjuk, de használható egyetlen sorhoz is, vagy akár egy soron belül is, például így:
+
console.log(/* amit logolni akarunk: */ "helló világ")
+ Mivel a kommentek célja általában az, hogy növeljék a szkript olvashatóságát, érdemes elkerülni ezt a stílust egy soron belül.
- Egysoros komment
-
Használjuk a
//
-t (két slash) egy sor kikommentezéséhez. Minden, ami a kettős slash után van ugyanabban a sorban, figyelmen kívül marad. A korábban bemutatott példában ezt a mintát először egy teljes sor kikommentezésére használjuk. Aconsole.log(message);
utasítás után a sor hátralévő részében használhatjuk.
Általában az egysoros kommenteket egy sorhoz, a többsoros kommenteket pedig több sorhoz kell használni, még akkor is, ha fordítva is lehetséges. Az utasításon belüli kommentezést kerülni kell!
A kommentek a tényleges kódsorok ideiglenes eltávolítására is használhatók, az alábbi módon:
// Ideiglenesen másik üzenetet használnánk
// var message = "test";
var message = "valami más";
Gyakorló feladatok
-
Hozzunk létre egy
ColorName
változót és legyenRED
az értéke! -
Melyik helyes az alábbi szkriptek közül?
console.log("hello") console.log("world");
console.log("hello"); console.log("world");
// console.log("hello") console.log("world");
console.log("hello"); console.log("world") //;
console.log("hello"); /* console.log("world") */
Gondolkodtató feladatok
-
Hány JavaScript utasítás írható egyetlen sorba pontosvessző használata nélkül?
-
Hozzunk létre két változót (
x
ésy
), majd írassuk ki az összegüket a konzolra!
Összefoglalás
Ebben a leckében megismertük a JavaScript végrehajtásának különböző módjait, valamint a szkript betöltési viselkedésének megváltoztatását. Megismertük továbbá a szkriptkompozíció és a kommentelés alapfogalmait, és megtanultuk a console.log()
parancs használatát.
A leckében használt HTML:
- <script>
-
A
script
taggel közvetlenül vagy egy fájl megadásával, azsrc
attribútummal lehet JavaScriptet bevonni. A szkript betöltésének módját azasync
és adefer
attribútumokkal módosíthatjuk.
A leckében bemutatott JavaScript fogalmak:
;
-
A pontosvessző az utasítások elválasztására szolgál. A pontosvesszőt néha — de lehetőleg ne — elhagyhatjuk.
//
,/*…*/
-
A kommentezéssel megjegyzéseket vagy metainformációkat lehet hozzáadni egy szkriptfájlhoz, vagy megakadályozhatjuk a parancsok végrehajtását.
console.log("text")
-
A
console.log()
paranccsal szöveg írható ki a böngésző konzoljára.
Válaszok a gyakorló feladatokra
-
Hozzunk létre egy
ColorName
változót és legyenRED
az értéke!var ColorName = "RED";
-
Melyik helyes az alábbi szkriptek közül?
console.log("hello") console.log("world");
Helytelen: Az első
console.log()
parancs nem kerül végrehajtásra, és az egész sor nem érvényes utasítás.console.log("hello"); console.log("world");
Helyes: Minden utasítás megfelelően végrehajtásra kerül.
// console.log("hello") console.log("world");
Helyes: Az egész kód figyelmen kívül marad, mert ez egy komment.
console.log("hello"); console.log("world") //;
Helytelen: Az utolsó utasítás után hiányzik a pontosvessző. A legvégén lévő pontosvesszió figyelmen kívül marad, mert ki van kommentezve.
console.log("hello"); /* console.log("world") */
Helyes: Egy helyes utasítást követ egy kikommentezett kódrészlet, ami így figyelmen kívül marad.
Válaszok a gondolkodtató feladatokra
-
Hány JavaScript utasítás írható egyetlen sorba pontosvessző használata nélkül?
Ha egy szkript végén vagyunk, akkor írhatunk egy utasítást, ami a fájl végével befejeződik. Egyébként az eddig tanult szintaxissal nem tudunk pontosvessző nélkül utasítást írni.
-
Hozzunk létre két változót (
x
ésy
), majd írassuk ki az összegüket a konzolra!var x = 5; var y = 10; console.log(x+y);