Autor Zpráva
joe
Profil
Zdravím,

všude čtu, jak se doporučuje vkládat VŠECHEN javascript kód do externích souborů, ale nikde jsem se nedozvěděl o žádných výhodách. Spíš naopak, jsem přesvědčen, že javascriptový kód ve stránce, který je přímo bude fungovat dříve než ten, který se zpřístupní až po načtení celé stránky. Takže co vás k tomu vede doporučovat dávat javascript do externích souborů.

A to nemyslím teď dávat veškerý kód do html, ale mám namysli například registrování událostí. Takže, jaké výhody nese zaregistrovat například události onclick, onmouseover a onmouseout až po načtení než je napsat přímo do HTML? Podle mě žádné, jen se funkčnost javascriptu oddálí do kompletního načtení stránky a to může být někdy nepříjemné... vás názor?
Chamurappi
Profil
Reaguji na joa:
Viz Vykonanie JS po nacitani <body>.

kód ve stránce, který je přímo, bude fungovat dříve než ten, který se zpřístupní až po načtení celé stránky
Externí skript se také vykonává okamžitě. Otázkou není, zda je lepší externí, nebo interní skript, ale zda jej vykonávat hned, nebo až po načtení.
Pokud mám sám pod kontrolou celou stránku (HTML, CSS i JS), vložím externí JS hned za místo, kde potřebuji něco udělat a udělám dotyčný úkon rovnou. Zároveň v tom externím souboru nadefinuji všelijaké další funkce, které pak interními skripty také volám hned, jak jsou potřeba. Žádné čekání.

Takže, jaké výhody nese zaregistrovat například události onclick, onmouseover a onmouseout až po načtení než je napsat přímo do HTML?
1) Můžu snadno nastavit hromadně onclick více elementům, aniž bych nafouknul kód.
2) Můžu pohodlně pracovat s privátními proměnnými přístupnými v jiném kontextu, viz lexikální uzávěry (zvané též closure).
3) Nemusím si dávat pozor na úskalí „jazyka v jazyku“, tj. vyhýbat se nebezpečným uvozovkám, které by mi zavřely atribut, nebo entitám, které by se na úrovni HTML parseru interpretovaly. <div onclick='alert("Entita &quot; je zrádná.")'>
4) Změna skriptu se pak obejde bez úpravy kódu elementu.

Pokud se při událostech nemá dít něco triviálního (jako třeba confirm), také je registruji skriptem. Hned, jak je to možné.
joe
Profil
Chamurappi
Externí skript...
Ano, přesně tak jsem to myslel, jen jsem to špatně napsal.

Souhlasím s tím, co jsi napsal v tom odkazovaném vlákně, jen mi přijde, že třeba hned první bod, který jsi napsal tady tomu odporuje.

Je sice pěkné, že se mi v HTML nebude několikrát opakovat ten samý řádek s onmouseover a onmouseout, ale než se mi k tomu zaregistrování událostí dostane, uživatel klidně už může takový element, kde budou takové události, dávno používat.

Nebo jsi to myslel tímto způsobem?

HTML kód
..
- elementy, kde budu chtít mít události
- tady hned třeba zavolat registrování těch metod na ty elementy
- pokračování v HTML..
...

Nevím, ale takhle se mi zdá, že se bude stránka načítat o chvíli déle. Záleží na provádění v tom kódu, jaké elementy budu procházet, co budu kontrolovat apod.

ad 2)
Nevím co přsně si pod tím představit, ale asi tuším. To se pravděpodobně u tak jednoduchého JS nevyskytne (o tom, který mám namysli)

ad 3)
Souhlas, myslel jsem spíš ale zápis onclick="showFunction()", kde funkce showFunction() je v externím souboru.

ad 4)
Snad jediný dobrý důvod, proč to oddělovat úplně (opět uvažuji nějaký jednodušší JS)


Díky
Chamurappi
Profil
Reaguji na joa:
Je sice pěkné, že se mi v HTML nebude několikrát opakovat ten samý řádek s onmouseover a onmouseout, ale než se mi k tomu zaregistrování událostí dostane, uživatel klidně už může takový element, kde budou takové události, dávno používat.
Tvůrce stránky musí najít rozumný kompromis. Je otázka, zda takový seznam elementů, které mají jednotně reagovat na uživatelovi úkony, může něco smysluplného dělat již v době, kdy ještě není celý načtený.

Nebo jsi to myslel tímto způsobem?
Ano.

ad 2) Nevím co přesně si pod tím představit, ale asi tuším.
function nastavTlacitkumUdalosti(pridat, ubrat, ukazat)
{
  var pocet = 5;   // lokální proměnná, která mimo tuto funkci není přístupná …
  ukazat.onclick = function()
  {
    alert(pocet);  // … ale je přístupná v tomto onclicku
  };
  pridat.onclick = function() { pocet++ };
  ubrat.onclick = function() { pocet-- };
}
_es
Profil
Podobný "uzáver" a "privátne premenné" sa dajú dosiahnuť aj prvým spôsobom, aj keď je určite lepšie uprednostniť vnorené funkcie.
A nedajú sa s tým robiť také špeciality ako v tvojom kóde a môže nastať kolízia názvov premenných.
Takže je lepšie sa tomu vyhnúť:
<FORM id=x>
<input type=button onclick="pocet++;" value=Pridať>
<input type=button onclick="pocet--;" value=Ubrať>
<input type=button onclick="alert(pocet);" value=Ukázať>
</FORM>
<script>document.getElementById("x").pocet=5;</script>
peta
Profil
joe To je velmi individualni, davam prednost externimu, pokud mi to nedela problemy.

externi JS vyhody:
* pokud neni v HTML, pak mas lepsi prehled o tom, co se zobrazi na strance a lepe se v tom orientu. Zakladni pravidlo je, stranka musi byt ovladatelna a pouzitelna i bez JS.
* pokud neni v HTML, google tehle strance dava bonus pri vyhledavani, protoze pro indexovani rychleji stranku zpracuje a externi JS ignoruje. Cimz setri cas. Kdyz by byl v HTML, tak musi vytridit JS od HTML a pak muze indexovat text.
* pokud stranku obnovujes a je-li JS mimo, pak se obnovuje jen HTML kod a ve vetsine pripadu se JS kesuje prohlizecem. Coz setris prenos dat, server.
* pokud mas vsechny JS spojene do jednoho, opet setris server
* pokud mas JS "komprimovane" (prevedeni na radky, smazani komentaru..., pripadne neco jako zip), opet setris server

nevyhody:
* Pokud mas par stranek, kde kazda obsahuje jiny JS a toho JS neni prilis, nema smysl ho davat externe. Treba ja mam JS hry, vse je v jedne strance.
* v php mam login.php , ktery includuji, mam v nem i JS, ktery nastavuje focus na input.jmeno.focus()
* zvysuje se pocet souboru, pripad je podobny jako v login.php , kdy mam treba upload_manager.php, kde pomoci JS skryvam ruzna policka. Mam tam 1k CSS, 1k JS a 10k PHP kodu. 3 soubory nebo 1? davam prednost 1, snadneji se to kopiruje.

A mozna by mne napadlo ke kazdemu jeste neco.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0