script binnen html tag
Ik maak gebruik van php variabelen in mijn javascript die pas na de head gedefinieerd worden, vandaar dat ik het script na mijn php code wil plaatsen.
Normaal voer ik de meeste php code uit voor mijn html code maar in dit geval is het wat lastiger.
Nee, zolang het maar in de <script>-tags gaat.
Daarnaast wordt het juist niet aangeraden om Javascripts in de head te zetten. Maar net boven de </body> tag, dus 2 (of 3) regels van onderen.
Eerst je HTML, dan je Javascripts.
Ik zet altijd mijn javascripts in mijn head. Als ik het goed begrijp kan ik dat dus vanaf nu het beste aan het einde doen.
Eerst HTML, dan CSS, dan Javascript, dan plaatjes, dan.....
In Opera heb je een Element Inspector (net als Chrome/FF etc), maar je kan ook zien wat, wanneer en hoe snel iets werd opgehaald.
Daar is winst in te halen.
Een leuk script dat een dingetje laat bewegen (wat totaal niet nodig is) moet echt pas komen als de pagina klaar is.
Niet dat de tekst later komt omdat jQuery volledig ingeladen moet worden.
Mmm die foto-toon-dinges is naar de klote (bij mij dan....)
Directe link: http://postimage.org/image/wgvg5epu7/
Gewijzigd op 10/09/2012 19:51:44 door Eddy E
Of als je bijv. een input value veranderd. Hardstikke irritant als je al je username aan het typen bent en dan het javascriptje opeens geladen is en de value voor je veranderd, kun je weer opnieuw beginnen...
Het is dus verstandig om het te doen, maar bedenk wel goed wat je wel en wat je niet doet.
Tevens, wat bedoel je binnen de HTML tag? Even muggenziften: het is het HTML element... :-)
Maar daarnaast, het HTML element is het rootelement van het document. Het behoord 2 children te hebben: Het HEAD element, met data die belangrijk is voor het browser en niet voor de gebruiker, en het BODY element, met de 'body' van de website.
Eddy Erkelens op 10/09/2012 19:45:23:
Ja, waarom zal je de pagina-load vertragen door Javascripts die toch nog niets (behoren en) kunnen doen. De DOM is toch nog niet klaar.
Eerst HTML, dan CSS, dan Javascript, dan plaatjes, dan.....
Eerst HTML, dan CSS, dan Javascript, dan plaatjes, dan.....
Woeh .. hier zit toch wel een kardinale denkfout in!! De DOM is nog niet klaar .. dom .. dom .. dom ..
Alle moderne browsers laden scripts en css asynchroon, wat betekend dat aan het laden van scripts, css e.d. begonnen word zodra dat kan. Door de latentie, response van de server en download tijd is een script pas na een bepaalde tijd geladen. Terwijl het script laadt, gaat de browser door met het bouwen van de DOM en met renderen, wat vaak veel vlugger gaat dan dat het script beschikbaar is.
Zet je het script achteraan, dan gaat eerst de DOM gebouwd worden , dan wordt gerenderd en daarna pas scripts geladen worden. Daarmee gaat kostbare tijd verloren en wordt je pagina traag.
Verklaar mij maar eens de resultaten van dit simpele HTML/JS testje: http://jsbin.com/atuhig/1/edit
Toevoeging op 10/09/2012 20:46:18:
John, ook jij maakt anders ook 2 denkfouten, of misschien meer fouten omdat je niet precies weet wat er gebeurd...
Verklaar mij maar eens de resultaten van dit simpele HTML/JS testje: http://jsbin.com/atuhig/1/edit
hier geld het volgende meestal voor: js met grafische doeleinden tussen de head en functionele js net voor de </body> tag
@John bij een externe file is het ook zo dat wanneer de browser de src attribuut tegenkomt hij deze eerst laad en dan vervolgens verder gaat met html parsen. het hoeft dus niet zo te zijn dat wanneer je externe files hebt je deze altijd bovenaan moet zetten deze kunnen ook prima onderaan mochten het functionele eigenschappen hebben en geen grafische.
N K op 10/09/2012 19:28:00:
Ik maak gebruik van php variabelen in mijn javascript die pas na de head gedefinieerd worden, vandaar dat ik het script na mijn php code wil plaatsen.
Dan kan je ook gewoon de structuur van je script aanpassen. Wat let je om de html head niet meteen naar het scherm te sturen, maar nog even in geheugen te houden. Een net script handelt eerst alle php af, voordat het output naar de browser stuurt.
En, als voorbeeld, jQuery ga je ook pas gebruiken nadat de pagina geladen is (kortom: de DOM klaar is). Dat is niet voor niets.
Ik kan me ook niet voorstellen dat je eerst even wat Javascript nodig hebt alvorens de rest van de HTML te (kunnen) gebruiken zoals jij wilt.
Javascript = leuk extraatje maar niet vereist.
John Berg op 10/09/2012 20:49:29:
Wouter: volgens mij ging het om waar je de javascript externe files moest neer zetten, in de head of onderaan. Dit gaat over inline javascript. Je vergelijkt appels met peren.
Maakt dat dan een verschil?
Wanneer je een library laadt in een aparte file; een framework of zelfgeschreven functies;
en dan heb je een eigen script, dat daar gebruik van maakt ...
Dan maakt het toch niet uit wat in een file staat en wat inline.
Sowieso moet een script volledig wachten op ALLES van script dat boven in de HTML-code staat (hoger in de broncode ...).
bv. als je jQuery gebruikt, mag pas aan gelijk welk script begonnen worden nadat jQuery volledig geladen is (jQuery staat dan hoger in de broncode dan de rest...). Of je script inline is of in een file; of je jQuery inline copy/paste (niet dat dit aan te raden valt) en je script in een file apart zet ...
dat maakt toch allemaal niet uit?
Dit klinkt niet echt Asynchroon
Gewijzigd op 11/09/2012 11:56:27 door Kris Peeters
Kijk nog eens naar dit: http://postimage.org/image/wgvg5epu7/full/
Terwijl de (bovenste rij) pagina nog geladen wordt worden er ondertussen al wat stijlbladen en afbeeldingen gedownload. Eerst alle HTML, dan alle andere dingen.
Dus niet als er een <img> komt, dat de HTML gaat wachten tot die afbeelding geladen is.
Je kan daar zelfs actief gebruik van maken. bv. CAPTCHA gebruikt het asynchrone verzoek om een code in een $_SESSION var te steken.
Ook heeft een andere <img> geen nood om te wachten op een andere <img>.
Een zelfde analogie kan ik maar moeilijk zien wanneer het om scripts gaat.