1. direktes Einbetten des Codes in HTML:
Code: Alles auswählen
<p>blah</p>
<script type="text/javascript">
<!--
alert('ich bin ein JS Popup');
-->
</script>
<p>blubb</p>
Code: Alles auswählen
<head>
<script type="text/javascript" src="includes/general.js"></script>
</head>
Code: Alles auswählen
<p>blah</p>
<script type="text/javascript" src="includes/general.js"></script>
<p>blubb</p>
Code: Alles auswählen
<p>blubb</p>
<script type="text/javascript" src="includes/general.js"></script>
</body>
Warum ist das so?
1. Hier wird der gesamte Javascript Code bei jedem Aufruf der Seite mitgeladen. Bei einem Zweizeiler mag das nicht dramatisch sein, bei längerem Code kann das die Ladezeit einer Seite aber schon spürbar verlangsamen. Besser ist es, den Code in eine externe Datei auszulagern. Diese wird in der Regel vom Browser nur ein mal geladen und dann im Cache vorgehalten. Der JS-Code wird also nicht immer neu geladen.
2. Hier wird der Code zwar in eine externe Datei ausgelagert, allerdings wird dieser immer gleich zu Beginn der Seite geladen und ausgeführt bevor die weiteren Elemente der Seite aufgebaut werden. Dies verzögert den Seitenaufbau bzw. die Ladezeit.
3. Im Grunde das gleiche Problem, wie bei 2.
4. Hier wird der HTML-Quellcode komplett geladen und dargestellt. Erst dann folgt die Verarbeitung des JS-Codes.
DOCH ACHTUNG:
Man muss unterscheiden, ob es sich bei dem einzubindenen Code um Bibliotheken (Funktionen, Klassen) oder um konkrete Anweisungen handelt. Werden konkrete Anweisungen vom Browser geladen, werden diese unmittelbar ausgeführt und das kann zu Problemen führen.
Beispiel:
Code: Alles auswählen
<html>
<head>
<title>Test</title>
</head>
<body>
<script type="text/javascript">
<!--
alert(document.getElementById('test').firstChild.data);
-->
</script>
<p id="test">Ich bin der Inhalt von 'test'.</p>
</body>
Code: Alles auswählen
<html>
<head>
<title>Test</title>
</head>
<body>
<p id="test">Ich bin der Inhalt von 'test'.</p>
<script type="text/javascript">
<!--
alert(document.getElementById('test').firstChild.data);
-->
</script>
</body>
Konkretes Beispiel: Einbindung der Javascript Bibliothek jQuery.
Im Ordner 'javascript' des Template-Ordners sollte eine Datei namens 'bottom.js.php' existieren. Wenn nicht, kann man diese einfach anlegen. Diese Datei wird stets am Ende eines Seitenaufbaus inkludiert. Alles, was man hier einträgt wird im Quellcode unmittelbar vor dem schließenden </body> Tag platziert. Dies ist eine normale PHP-Datei, was hier eingebaut wird, muss also nicht auf Javascript beschränkt sein.
Code: Alles auswählen
<?php
// Zunächst den relativen Pfad zu den Javascript-Dateien in einer Variable speichern.
$jspath = 'templates/' . CURRENT_TEMPLATE . '/javascript';
// jetzt können hier die einzubindenden JS-Dateien per echo ausgegeben werden
echo '<script type="text/javascript" src="' . $jspath . '/jquery-1.4.2.min.js"></script>'."\n";
// ggf. noch weitere jQuery Plugins
echo '<script type="text/javascript" src="' . $jspath . '/jquery.countdown.js"></script>'."\n";
echo '<script type="text/javascript" src="' . $jspath . '/jquery.countdown-de.js"></script>'."\n";
echo '<script type="text/javascript" src="' . $jspath . '/thickbox.js"></script>'."\n";
// zum Schluß(!) noch eine eigene JS-Datei, in der wir alle Anweisungen/Funktionsaufrufe platzieren
echo '<script type="text/javascript" src="' . $jspath . '/custom.js"></script>'."\n";
Die custom.js kann zum Beispiel so aussehen:
Code: Alles auswählen
// Funktion für den Aufruf des "Seite Drucken" Dialogs
function print_product(prd_id)
{
window.open('print_product_info.php?products_id=' + prd_id, 'popup', 'toolbar=0, width=640, height=600');
}
/*
konkrete Anweisungen, die die Seite per JS manipulieren. Diese dürfen erst ausgeführt werden, wenn das Laden der Seite vollständig abgeschloßen ist. Deswegen werden diese Anweisungen erst mit dem Ereignis "$(document).ready" ausgeführt.
*/
$(document).ready(function() {
alert('Die Webseite ist nun vollständig geladen');
/* weitere Anweisungen hier */
});