Új hozzászólás Aktív témák
-
Sk8erPeter
nagyúr
válasz
PumpkinSeed #11923 üzenetére
A JSFiddle úgy működik, hogy egy iframe-be pakolja a kódodat, úgy, hogy ő az alapvető markupot legenerálja hozzá:
1. berakja a
<!DOCTYPE html><html><head>...</head><body>...</body></html>
keretet, úgy, hogy
2. a <head>-be beszúrja a karakterkódolást meghatározó <meta>-taget (<meta http-equiv="content-type" content="text/html; charset=UTF-8">),
3. a title-t (amit a bal oldali panelon határozhatsz meg, a Fiddle Options-nél),
4. egy normalize.css-t, amennyiben bepipáltad ezt a Fiddle Options részen,
5. egy dummy CSS-fájlt (ez legalábbis jelenleg üres)
6. az általad kiválasztott library-t valamely CDN-ről belinkelve, vagy épp egy dummy JS-fájlt "No-Library (pure JS)" esetén
7. a saját CSS-kódodat egy legenerált <style>-tagbe,
8. a beállítástól függően rakja be az általad írt JavaScript-kódot egy <script>-tagbe bepakolva (a 4. a kakukktojás, mert ott a kód nem a <head>-be kerül):
8.1. ha onLoad beállítást választottál bal oldalt, akkor a head-részben a script tagen belül window.onload=function(){...} keretet generál, aztán a ... rész helyére rakja a kódodat;
8.2. ha onDomReady beállítást választottál, akkor ilyen keretet generál le (a kommentált részhez kerül a kódod)
8.3. a "No wrap - in <head>" beállítás esetén értelemszerűen nem generál köré semmilyen keretet, a kódod a <head> tag végén, egy <script> tagen belülre kerül, úgy, ahogy van, változtatás nélkül
8.4. a "No wrap - in <body>" kiválasztásakor szintén nem generál köré semmilyen keretet, a kódod viszont a <body> (és nem a <head>) tag legvégén, a záró </body> elé kerül injektálásra, egy <script> tagen belülre, úgy, ahogy van, változtatás nélkül
9. A <body> tagen belülre megy a HTML-panelben megírt kód, változtatás nélkül.Tehát a lényeg, hogy ezt a keretet a jsFiddle biztosítja, neked nem kell megírnod. A <body> tag meglétét mondjuk "kezeli", az onload-attribútummal sincs problémája (nem lesz duplikált <body> tag, hanem értelemszerűen ilyenkor az általad megírt kerül a kódba), de szerintem szokj rá, hogy sosem raksz inline-attribútumokba semmilyen JavaScript-kódot. A JavaScript-kódot mindig gondosan különítsd el a HTML-től, ahogy minden egyéb kódtól is, lehetőleg minimális legyen a kutyulódás a különböző nyelvek között. (Nyilván vannak esetek, amikor nehezen vagy nem elkerülhető, de alapvetően a szeparált kód a cél.) A kódod így szebb, karbantarthatóbb lesz.
Ha valamit mégis a load-eseményre szeretnél kötni, akkor valahogy így használd a JavaScript-kódban:
function onInitialization(){
// ide mehet a kódod
}
window.addEventListener("load", onInitialization, false);(figyelem, az addEventListenerben az onInitialization csak egy mutató a függvényre, amit meg fog hívni a load esemény bekövetkezésekor, szándékosan nincs mögötte a zárójelpár!)
[ Szerkesztve ]
Sk8erPeter
Új hozzászólás Aktív témák
- Vezetékes FÜLhallgatók
- A fociról könnyedén, egy baráti társaságban
- ASUS ROG Ally
- nVidia GeForce GTX 1660 / GTX 1660 Super / GTX 1660Ti (TU116)
- Apple notebookok
- Szinte csak formaság: bemutatkozott a Pixel 6 és Pixel 6 Pro
- Google Pixel topik
- Kompakt vízhűtés
- iPhone topik
- pfSense - Avagy az okosított házirouter
- További aktív témák...
- LEÁRAZVA! HP EliteBook 850 G7 Fémházas Szuper Strapabíró Laptop 15,6" -65% i7-10610U 32/512 FHD HUN
- Xiaomi 13T fekete 8/256 kártyafüggetlen, garanciális
- PlayStation 4 Pro 1TB 7216B - The Last Of Us II Ed. + játék, 6 hó garanciával, Bp-i üzletből eladó!
- Playstation 5 Drive Edition 825GB (CFI-1216A), 6 hónap garanciával, Bp-i üzletből eladó
- MacBook Air M1 256GB SSD 8GB RAM 2025.05-ig Garanciális