JavaScript Code in HTML einbinden

Vorwort:

JavaScript und Ajax Effekte erfreuen sich im Web an mehr Beliebtheit denn je. Aus diesem Grund möchten wir auch hier eine Tutorial Reihe mit einbringen. Wir starten bei den Grundvoraussetzungen um den JavaScript Code ausführen zu können.

Wie bindet man Javascipt Code in eine HTML Seite ein?

Hier sehen wir den einfachsten Weg um JavaScript in HTML einzubinden. Es folt die übliche Semantik von HTML indem wir eine Seite immer mit html und body deklarieren. Unser JavaScript wird dann auf unseren Wunsch im body ausgeführt.

HTML Seite mit JavaScript Code im body
 
<html>
<body>
 
<script type="text/javascript">
document.write("Ich bin ein Javascript Code!");
</script>
 
</body>
</html>
 

Erläuterung:

Zwischen den beiden <script> Tags steht der JavaScript Code, der ausgeführt werden soll.

Javascript Code
 
document.write("Ich bin ein Javascript Code!");
 

Man darf in jedem HTML Element auch einen JavaScript Code einbinden und ausführen. Beispiele für HTML Elemente sind <head>, <body>, <div>, <p> usw...

Da JavaScript eine Browser Interpreter Sprache ist, wird der Code jedesmal ausgeführt wenn die Webseite geladen wird.


Eine externe JavaScript Datei in eine HTML Seite einbinden:

HTML Seite mit externer JavaScript Datei im head
 
<html>
<head>
<script type="text/javascript" src="MeinJavaScript.js"></script>
</head>
<body>
Hier steht der Inhalt meiner Webseite
</body>
</html>
 

Erläuterung:

Üblicherweise bindet man JavaScript Code mittels externen .js Dateien ein, um den HTML Code vom JavaScript Code getrennt zu halten. Die am meisten verbreiteste Variante ist, dass die Dateien im <head> geladen werden. Der Code für das laden einer externen JavaScript (*.js) Datei sieht dann so aus:

HTML Code für *.js laden
 
<script type="text/javascript" src="MeinJavaScript.js"></script>
 

Der Inhalt der Datei MeinJavaScript.js kann dann JavaScript code enthalten wie zum Beispiel:

JavaScript Code in *.js Datei
 
document.write("Ich bin ein Javascript Code!");
 

JavaScript im Web 2.0

Im Web ist JavaScript sehr stark verbreitet und wird bei immer mehr Webseiten sehr intensiv genutzt. Durch die Möglichkeit HTML Code der breits gerendert wurde zu manipulieren, bietet einem JavaScript auch eine Menge neuer Möglichkeiten. Durch das Aufkommen den WEB 2.0 und den damit verbundenen Ajax Möglichkeiten nimmt die Anzahl an bits und bytes die für JavaScripts geladen werden sicher weiter zu. Der Trend geht zu Frameworks wie jQuery und Mootools, welche eine Vielzahl an Funktionen beinhalten, die eine Seite interaktiver, zugänglicher, und besser machen können.

Als Beispiele für Interaktionen kann man hier die Bilder - Slider erwähnen, mit denen eine Seite gleich etwas mehr Leben erhalten kann. Oft findet man "vor und zurück" Knöpfe, oder es öffnet sich eine Modalbox wenn man auf ein Bild klickt.
Zugänglicher wird eine Seite zum Beispiel wenn man per JavaScript ein Eingabeformular formatiert, und der Benutzer schon vor einem "neu laden" der Seite ein Feedback bekommt, ob die Eingabe valide (korrekt) ist.




Recket (11.01.2012)
Ja Nein Zitat :
Wie kann ich ein Javascript in Joomla einbinden?
Man kann es in Joomla händisch in das Template einbinden oder in Plugins oder Module.Wenn du zum Beispiel ein script einbinden willst, welches die Funktionalität der Seite erhöhen soll und global zur Verfügung stehen soll, dann solltest du im head der index.php deinen JavaScript Code einbauen.Dieser wird dann auf allen Seiten ausgeführt.Plugins die man installiert machen das ebenfalls. Viele Plugins in Joomla beinhalten auch JavaScipt Code für Mootools oder jQuery und laden ihre Scripts um head der Seite mit. Im head deswegen, weil die Reihenolge der Ausführung wichtig ist, und deshalb die Scripts oben sein sollen wenn sie weiter unten (z.B.: in Joomla Beiträgen) angesprochen werden.
Vlado Repic (23.12.2011)
Ja Nein Guten TagWie kann ich ein Javascript in Joomla einbinden? Wie man es in eine html-Datei einbindet weiss ich. Aber weiss nicht wo in Joomla.Könnt ihr mir helfen?Liebe GrüsseVlado

Kommentarformular ausblenden

Smileys

:confused::cool::cry::laugh::lol::normal::blush::rolleyes::sad::shocked::sick::sleeping::smile::surprised::tongue::unsure::whistle::wink:

 1500 Verbleibende Zeichen

Antispam Anderes Bild laden Groß-/Kleinschreibung beachten