2. Fórumok
  3. Szoftverfejlesztés
  4. Weblap készítés
  5. (kiemelt téma)
Keresés

Új hozzászólás Aktív témák

  • #11924 Sk8erPeter nagyúr PumpkinSeed #11923
    Új Válasz #11924
    Új hozzászólás
    Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra
    Privát üzenet küldése

    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