Bevezetés
JavaScript nem szorul bemutatásra. Az egyik legnépszerűbb programozási nyelv a webfejlesztésben. Hasonlóan működik, mint a(z) HTML és a(z) CSS. Mindezek a nyelvek segítenek a webalapú alkalmazások és programok tervezésében és fejlesztésében.
Tehát miben hasznos különösen a JavaScript? A JavaScript segítségével webes alkalmazásait és weboldalait meglehetősen interaktívvá teheti. A modern szférában nincs helye az önelégültségnek. Az első néhány másodpercben meg kell ragadnia a látogatók figyelmét, és le kell kötnie őket. Kétségtelen, hogy az érdekes és responzív webdesign az egyik legjobb módja ennek. Szerencsére a legtöbb böngésző támogatja a JavaScriptet. Néhány beépített motor segítségével futtatható a böngészőjében.
JavaScript hozzáadása a HTML-hez
Ha JavaScript fájlokat szeretne használni a webalkalmazásához, akkor azokat a HTML-jelöléssel párhuzamosan kell futtatnia. Kétféleképpen adhat hozzá JavaScriptet a HTML-hez. Az egyik megközelítés az, hogy ezt beágyazva (inline) teszi meg egy HTML-dokumentumon belül. A másik módszer az, hogy külön fájlként adja hozzá. Ez a fájl a HTML-dokumentummal együtt fog letöltődni.
Ebben az útmutatóban részletesen megvizsgáljuk, hogyan adhat hozzá JavaScriptet a HTML-hez e két módszer használatával.
Hogyan adjunk JavaScriptet HTML-dokumentumokhoz beágyazottan (inline)
Először azt nézzük meg, hogyan adhat hozzá JavaScriptet egy HTML-dokumentumhoz beágyazottan. Ehhez a dedikált HTML-taget kell használnia. Ez a <script>. Ez a tag fogja közre a JavaScript-kódot. A tagot a HTML-jelölésben bárhol elhelyezheti. Az, hogy hova helyezi, attól függ, hogy mikor szeretné, hogy a JavaScript betöltődjön.
Elhelyezheti például a <head> szakaszban, a <body> szakaszban, vagy akár a </body> zárótag után is. Ha a JavaScriptet távol szeretné tartani a HTML-kód fő tartalmától, jobb, ha a taget a <head> szakaszba helyezi. Ez fogja tartalmazni a JavaScript-kódot. Másrészt előfordulhat, hogy azt szeretné, hogy a JavaScript-kód a weboldal elrendezésén belül fusson. Ebben az esetben a taget a <body> szakaszba kell helyeznie. Ezt fogja tenni például akkor, ha a document.write-ot használja tartalom generálására.
Ezt egy kódpéldán keresztül lehetne jobban megérteni. Tekintse meg a következő üres HTML-dokumentumot. A dokumentum böngészőben megjelenő címe: Today’s Date:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Today's Date</title> </head> <body> </body> </html> |
Mint látható, itt nincs nyoma JavaScriptnek. A dokumentum egyelőre csak a HTML-jelölést tartalmazza. Most szeretnénk beágyazottan hozzáadni némi JavaScript-kódot, hogy az egyszerre töltődjön be és fusson le. Tekintse meg a következő rövid JavaScript-kódot:
|
1 2 |
let d = new Date(); alert("Today's date is " + d); |
A fenti kód értelmében lehetővé tesszük a weboldalunk számára, hogy egy figyelmeztetést (alert) jelenítsen meg a mai dátummal. Így függetlenül attól, hogy a látogató mikor nyitja meg az oldalt, az a mindenkori aktuális dátumot fogja mutatni.
Most, hogy hozzáadjuk ezt a kis JavaScript-kódot a HTML-dokumentumhoz, a <script> taget fogjuk használni. Először is, a JavaScript-kódot a <head> tagek közé kell helyeznie. Ez jelzi a weboldalnak, hogy ennek a konkrét kódnak a lap többi tartalma előtt kell betöltődnie. A kódot a <title> tagek alá helyezheti. Így kell ezt megtennie:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>A mai dátum</title> <script> let d = new Date(); alert("A mai dátum: " + d); </script> </head> <body> </body> </html> |
A JavaScript-kódod most már hozzá van adva. A weboldalad futni fog, és be fogja tölteni ezt a szkriptet az oldal többi része előtt. Amikor elindítod az oldaladat, egy figyelmeztetést kapsz a jelenlegi dátummal, valahogy így:
Így adhatod hozzá a kódot a HTML-dokumentum <head> szakaszához. Alternatív megoldásként a szkriptet a <body> címkéken belülre vagy kívülre is helyezheted. Ahogy az alábbi példában látható, a kódrészletet a <head> szakasz után fogjuk hozzáadni:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>A mai dátum</title> </head> <body> <script> let d = new Date(); document.body.innerHTML = "<h1>A mai dátum: " + d + "</h1>" </script> </body> </html> |
Ezen módosítás eredményeként az oldal újratöltésekor valami hasonlót fogsz látni:
Hogyan adjunk JavaScriptet a HTML-hez külön JavaScript fájl használatával
A kisebb JavaScript-szkriptek jól működnek a HTML-fájlokkal. Ez azért van, mert teljes egészükben egyetlen oldalon vagy még kevesebben futnak. Ha nagyobb szkriptekkel dolgozol, amelyek több oldalt is lefednek, a fájl nagyon nehezen érthetővé válhat. Ezért lehet szükség arra, hogy külön JavaScript-fájlként add hozzá. A fájl a HTML-dokumentummal egy időben töltődik be.
Ebben a szakaszban arról lesz szó, hogyan adhatsz JavaScriptet a HTML-hez egy külön fájl használatával. A kód jellemzően egy vagy több .js fájlban kap helyet. A HTML-dokumentum úgy hivatkozik majd ezekre a fájlokra, mint bármely más külső erőforrásra. Számos oka van annak, amiért érdemes lehet teljesen különálló JavaScript-fájlt használni. Főként az, hogy a kódot sokkal könnyebben olvashatóvá és érthetővé teszi. Nem beszélve arról, hogy a különálló fájlok lehetővé teszik a gyorsítótárazott oldalak gyors betöltését, és viszonylag könnyebben karbantarthatók is.
Ahhoz, hogy kihasználd ezeket az előnyöket, tudnod kell, hogyan kapcsold össze a kettőt egymással – a JavaScript-fájlt és a HTML-dokumentumot. A megértés megkönnyítése érdekében egy kis webes projekt példáját vesszük alapul. Ez a feltételezett projekt egy fő index.html fájlt tartalmaz a gyökérkönyvtárban, egy style.css-t a css/ könyvtárban, és egy script.js-t a js/ könyvtárban. Íme a kis projektünk:
|
1 2 3 4 5 6 7 8 9 10 11 |
project/ ├── css/ | └── style.css ├── js/ | └── script.js └── index.html |
A HTML-jelölésünkhöz a korábban használt dokumentumot fogjuk használni:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>A mai dátum</title> </head> <body> </body> </html> |
Most, hogy megvan a két dokumentumunk, elkezdhetjük összekapcsolni őket. Hozzá kell adnunk a dátumra vonatkozó JavaScript-kódot a script.js fájlhoz. Ezt egy <h1> címsorként fogja hozzáadni a következőképpen:
|
1 2 |
let d = new Date(); document.body.innerHTML = "<h1>A mai dátum: " + d + "</h1>" |
A kód HTML-dokumentumhoz való kapcsolásához hozzá kell adnia egy hivatkozást a szkriptre. A hivatkozásnak a HTML-sablon <body> szakaszán belül vagy az alatt kell szerepelnie. Íme a kód, amelyet itt fog használni:
|
1 |
<script src="js/script.js"></script> |
Mint látható, a <script> címkét használjuk. Ez a címke a projekt js/ könyvtárában található script.js fájlra mutat. Így fog megjelenni a kód a HTML-dokumentumban:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>A mai dátum</title> </head> <body> </body> <script src="js/script.js"></script> </html> |
Ha szeretné, elvégezhet néhány stilisztikai módosítást az oldal feldobásához. Például adjunk hozzá egy kis háttérszínt a <h1> címsorhoz. Ezt a módosítást a style.css fájlban fogjuk elvégezni:
|
1 2 3 4 5 6 7 8 |
body { background-color: #0080ff; } h1 { color: #fff; font-family: Arial, Helvetica, sans-serif; } |
Mivel a módosítást a fejlécben kell megjeleníteni, a HTML-dokumentum <head> szakaszában fogunk hivatkozni rá. Így fog hivatkozni erre a CSS-fájlra:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>A mai dátum</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> <script src="js/script.js"></script> </html> |
Most, hogy elvégeztük a szükséges hivatkozásokat, láthatja a változásokat. Töltse be az index.html fájlt a böngészőjébe, és egy ehhez hasonló oldalt fog látni:
Ha frissíteni szeretné a kódot, az összes oldalt egyetlen helyről szerkesztheti. Ez nagyon egyszerűvé teszi a weboldalak karbantartását. Ez az előnye annak, ha külön fájlt használ a JavaScript-szkriptekhez.
Összegzés
Remélhetőleg ez az útmutató segített többet megtudni a JavaScript HTML-hez való hozzáadásának folyamatáról. Kitértünk arra, hogyan teheti ezt meg beágyazottan (inline) egy HTML-dokumentumban, valamint arra is, hogyan adhatja hozzá .js fájlként. Most, hogy már ismeri az alapokat, sokkal többet tehet a JavaScript segítségével a HTML-ben.
Íme néhány forrás a blogunkról, amelyek segítenek a JavaScript további hasznosításában:
- Ha saját webalkalmazást épít, tekintse meg az útmutatónkat a legjobb szerverbeállítás kiválasztásáról.
- Ha szeretné megtanulni, hogyan hozzon létre egy blogot a Ghost segítségével, tekintse meg ezt az útmutatót.
- Tekintse meg ezt az útmutatót, hogy megtudja, hogyan telepítheti a Node.js-t Ubuntu 18.04-re.
Kellemes számítógépezést!
Hozzászólások
Még nincsenek hozzászólások. Legyen Ön az első.