Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

jQuery für Webdesigner

Das erste jQuery-Script mit NetBeans für die Website

Testen Sie unsere 2015 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Hier geht es um die Bedeutung der Syntaxhilfe für die jQuery-Entwicklung unter NetBeans. Außerdem lernen Sie erste Unterschiede zwischen JavaScript und jQuery kennen.

Transkript

In diesem Video zeige ich Ihnen das erste jQuery-Skript und weise auf ein paar Besonderheiten hin, was die Schreibweise betrifft. An dieser Stelle sei noch mal gesagt: Für alle Skripte in der Regel, die ich in diesem Workshop verwende, ist der Speicherplatz das htdocs-Verzeichnis des Webservers XAMPP, also in der Regel unter C:\XAMPP\ htdocs zu finden, unter Mac eben Applications und so weiter und so fort. Wenn Sie das nicht möchten oder wenn Sie keinen Webserver installiert haben, können Sie die ganzen Dokumente auch einfach in ein Verzeichnis kopieren und von dort aus direkt mit einem Webbrowser öffnen. Okay, also: Um ein jQuery-Skript zu starten und zu programmieren, brauchen Sie auch wieder den None-Befehl. Der folgt fast immer im None-Bereich, wobei er theoretisch gesehen an jeder Stelle stehen kann, also manchmal sieht man ihn auch am Fußbereich des Dokuments. Das hat was mit möglichen Fehlern zu tun, mit Interpretation. Soll uns aber im Moment nicht weiter stören. Und in diesem None-Bereich möchte ich auch ganz kurz nur mal auf den Unterschied von JavaScript zu jQuery eingehen und Ihnen zeigen, warum jQuery so beliebt ist. Sagen wir mal, ich möchte mit JavaScript auf diesen Tag zugreifen, auf den None-Tag, den Überschriftentag. Dann würde ich das in JavaScript folgendermaßen schreiben: document, Punkt. Jetzt geht schon eine ganze Menge Befehle auf und da sieht man schon getElementsByTagName(). So, und dann kann ich hier mit "h1" und Anführungsstrichen den Zugriff auf dieses Dokument, oder besser gesagt auf dieses Objekt, vornehmen und dann auch gegebenenfalls weitere Befehle dazu durchführen. Und das ist eine ganze Menge an Schreibweise. Wenn ich also jetzt das Ganze in jQuery-Manier schreibe, dann verwende ich ein Dollarzeichen, runde Klammer, Anführungsstriche und h1. Und dann geht's weiter. Sie sehen, jetzt komme ich ebenfalls an Attribute dran. Und ich glaube, diesen ganzen Bereich, wenn man den als Entwickler sich sparen kann, dann wird ganz schnell deutlich, wo eben der enorme Verbreitungsgrad von jQuery auch heute herkommt. Das ist wirklich sehr, sehr leicht und einfach zu schreiben. Schauen wir uns nun dieses Dollarzeichen auch mal genauer an. Eigentlich wird jQuery über den jQuery-Befehl eingebunden. Und hier hilft Ihnen NetBeans auch wieder auf hervorragende Weise, zu überprüfen, ob das alles korrekt ist. Denn wenn ich jetzt zum Beispiel mich verschreibe, ich schreibe also nur query, schreibe dann eine runde Klammer und würde dann zum Beispiel document schreiben, gefolgt von einem Punkt, dann bekomme ich zwar auch hier Informationen, aber die, wie man hier sieht, haben nichts mit jQuery zu tun. Also hier kommt der Hinweis auf JavaScript, aber das stimmt alles in dieser Richtung nicht. Und das gibt mir so ein Symbol oder so ein Zeichen, ich hab mich irgendwo vertan. jQuery() liefert da schon ein anderes Ergebnis. Also wieder document. Wenn ich jetzt einen Punkt schreibe, dann sieht man, hier habe ich auch die jQuery-API. Das macht es eben so interessant, gerade auch NetBeans zu benutzen. Programmierer, wie gesagt, mögen so wenig wie möglich schreiben und entsprechend können Sie sich das hier auch schenken, also jQuery weglassen und das Ganze mit dem Dollarzeichen versehen. Und dann sind wir bei der gleichen Variante. Okay, also: Wir nehmen das Dollarzeichen, verweisen in dem Dollarzeichen auf document und folgen dann mit einem Punkt zu der Methode ready(). Und in ready() wird quasi eine Funktion aufgerufen. Das Ganze schreibt man function() {. und dann drücken Sie bei NetBeans einfach Enter und können die komplette Funktion mit Semikolon beschließen. Hier hinein kommen nun alle Funktionen, die Sie programmieren möchten, Aufrufe und dergleichen. Was bedeutet dieser Eintrag? Wenn jQuery gestartet, das aktuelle Dokument ready ist, also mit anderen Worten, wenn dieses Dokument vollständig vom Webbrowser geladen wurde. Und das macht durchaus Sinn, also wenn man jetzt zum Beispiel sich wieder vorstellt, man greift hier unten auf diese Befehle zu, also auf die Tags zu, von HTML. Das muss ja keine Überschrift sein, das kann ja auch viel weiter unten eine Grafik zum Beispiel sein. Wenn aber das Dokument bis dahin noch gar nicht geladen ist, dann würde das zu einer Fehlermeldung oder zu einem nicht gewollten Abbruch eines Skriptes führen. Das umgehen Sie, indem Sie zunächst mal warten, bis das Dokument vollständig vom Browser interpretiert wurde, und dann gibt der Browser ein Signal zurück. Das kann über jQuery abgefragt werden und genau das macht diese Funktion. Und erst dann, wenn alles okidoki ist, erst dann werden die Befehle, die hier drin stehen, auch ausgeführt. Diese Schreibweise finden Sie deswegen auch ab und zu in dieser Form. Also ich kann auch genauso schreiben: $(window).load(). Das ist ein bisschen was anderes von der reinen Funktion her, aber im Großen und Ganzen ist es hier im Wesentlichen identisch. Also nicht verwundert sein, wenn Sie manchmal $(document).ready() sehen und auch in Skripten, die Sie vielleicht aus dem Internet laden, $(window).load(). Im Grunde können Sie beide Varianten einsetzen, aber ich beziehe mich jetzt hier in dem Workshop auf diese Schreibweise mit $(document).ready(). Gut! Starten wir unser erstes jQuery-Skript mit einem Klassiker und zwar nehmen wir dafür mal eine Funktion alert() und in alert() schreiben Sie bitte in runden Klammern und Anführungsstrichen "Hello World!". Befehle, wie aus C-ähnlichen Dialekten üblich, werden mit Semikolon abgeschlossen. Kleine Info am Rande: Warum eigentlich immer Hello World? Zwar haben seinerzeit Kerningham und Ritchie, die Entwickler und Erfinder der Programmiersprache C, das erste C-Programm der Welt mit Hello World! veröffentlicht und so ist es Usus, dass in C-ähnlichen Dialekten alle Programmierer der Welt heute, quasi als Tribut an die beiden, ihr erstes "C-dialektähnliches" Programm auch mit Hello World! begrüßen. Ist so ein kleiner Tribut. Ich finde das sehr nett und deswegen mache ich das auch immer mit einem solchen ersten Programm. Das Dokument ist funktionstüchtig, es gibt keine Fehlermeldung. Also wird das Ganze abgespeichert und kann nun im Webbrowser aufgerufen werden. So und das habe ich hier schon eingegeben, also localhost/jquery/ und dann st-002.html. Wenn ich das Dokument jetzt noch einmal lade, dann kommt der Dialog und das ist dieser alert()-Befehl. Also, alert() eröffnet diese Dialogbox. Dadrin steht nun Hello World! Und somit herzlichen Glückwunsch! Sie haben Ihr erstes jQuery-Dokument geschrieben. Und Sie sehen, das ist gar nicht so schwierig und erklärt sich eigentlich von der Funktionsweise über die Einbindung der Bibliothek bis zur Ausführung eines Skriptbefehles in jQuery fast von alleine.

jQuery für Webdesigner

Sehen Sie, wie sich schnell und einfach eine jQuery-Entwicklungsumgebung einrichten und ein eigener Webserver installieren lässt, um danach Ihre Website durch jQuery aufzuwerten.

2 Std. 54 min (23 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!