(1)
Artikel
bewerten
(93% positiv)
(13)

In der Praxis wird auf den meisten Webseiten kein reines JavaScript, sondern meist die freie JavaScript-Bibiliothek jQuery verwendet. jQuery hat sich in den letzten Jahren als Quasi-Standard für clientseitige Browserscripts entwickelt, siehe: http://w3techs.com/technologies/overview/javascript_library/all

 

jQuery ist eine JavaScript Bibliothek, welche JavaScript wesentlich vereinfacht. Basis für unser jQuery Beispiel ist, wie so oft, eine simple Textdatei. 

 

Die Dateiendung ".htm" oder ".html" gibt vor, dass die Datei mit dem Browser geöffnet werden soll. Natürlich kann ein JavaScript Code auch in einer serverseitigen ".php" Datei verwendet und vom Client interpretiert werden. Für ein besseres Verständnis fangen wir mal ganz am Anfang an.

Einbinden von jQuery in eine HTML Datei

Um unser erstes jQuery Skript erstellen zu können benötigen wir als erstes die jQuery Bibliothek, diese kann über 2 verschiedene Wege eingebunden werden.

 

1) per Download von http://jquery.com/ und Aufruf von der eigenen Webseite und einbinden mittels 

<script src="jquery.js"></script>

 

2) per Aufruf über CDN, also gehostet auf einer anderen Seite, die Bibliothek liegt dann nicht auf dem lokalen Webserver, sie wird so eingebunden: 

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

(die Quelle ist die Seite code.jquery.com, nicht der lokale Webserver)

 

folgendes Beispiel verwendet Variante 2, ein Download der Bibliothek ist also nicht notwendig, es reicht der Verweis auf die externe Seite http://code.jquery.com ...

das erste Skript

da JavaScript und somit jQuery vom Browser interpretiert wird, benötigen wir zum testen keinen Webserver, es reicht eine Datei mit folgendem Inhalt zu erstellen und diese per Browser zu starten:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQueryTest</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script>
$("body").append("<h1>unser erstes Skript schreibt nur ein wenig Text in den body</h1>");
</script>
</body> 
</html>
 
Legende:
in Blau: Standard HTML Code
in Rot: einbinden der Bibliothek
in Grün: unser erstes jQuery Beispielskript
 

erstellen der Textdatei

unter Windows würde das dann z.B. so aussehen, wir erstellen eine neu Textdatei:

wir kopieren den oben angeführten Inhalt in die Datei und speichern diese mit der Endung .htm:

  (am besten unter Anführungszeichen, da Windows ansonsten folgende Datei erstellt: test.htm.txt)

durch das Klicken auf die Datei, wird das Skript gestartet.

was macht das Skript?

HTML Elemente in jQuery werden immer, wie folgt aufgerufen:

$("HTML-Objekt").Aktion(Option_zur_Aktion)

 

in unserem Beispiel, das HTML Element "body", gemeint ist damit: <body>

als Aktion verwenden wir die Funktion "append", welche einen Inhalt einfügt:

$("body").append("<h1>unser erstes Skript schreibt nur ein wenig Text in den body</h1>"); 

interpretierter Quellcode

schauen wir den interpretierten Quellcode des Clients an sieht das so aus:

in Google Chrome z.B.: Rechtsklick und "Element untersuchen"

 

im Gegensatz zum

Seitenquelltext:

dieser zeigt den Quellcode ohne ihn zu interpretieren:

 

letzte Änderung dieses Artikels: 19.09.2016 15:48




Kommentare


andere Themen getagged mit #wie erstelle ich