Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Contao 3 Grundkurs

JavaScript: Da tut sich was.

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
JavaScript ist eine client-seitige Programmiersprache, d. h. sie wird vom Browser ausgeführt. Mit JavaScript lassen sich z. B. Benutzeraktionen auswerten oder Inhalte nachladen. In Contao lassen sich zwei mitgelieferte JavaScript-Frameworks aktivieren.
04:36

Transkript

JavaScript ist eine von Netscape die man in HTML-Dokumente einbinden kann. Man erreicht damit, dass irgendetwas auf der Seite passiert. Das kann eine Berechnung sein, oder es können irgendwelche Elemente sein, die von links nach rechts wandern, oder ein Vorschaubild, das sich, wenn man darauf klickt, in einem separaten Fenster in Großdarstellung öffnet. JavaScript wird vom Browser interpretiert und ausgeführt, deshalb spricht man auch von einer kleinseitigen Programmiersprache. Ich möchte das letztgenannte Beispiel einmal umsetzen, nämlich ein Vorschaubild, das sich in Großdarstellung zeigt, wenn man draufklickt. JavaScript wird in das HTML-Dokument eingebunden, also liegt es nahe, dass wir JavaScript im Seitenlayout aktivieren. Da gehe ich jetzt mal rein, ich öffne unser Seitenlayout screen, scrolle etwas weiter runter, und sehe hier einmal jQuery und einmal MooTools. Beides sind JavaScript-Frameworks. Zu Beginn bis Version 2 war MooTools in Contao integriert, und aufgrund steigender Beliebtheit von jQuery ist jetzt ab Version 3 auch jQuery mit dabei. Der Vorteil von solchen Frameworks ist, dass man mit einfachen Anweisungen bestimmte Effekte erzielen kann. Man muss gar nicht mehr so genau wissen, was da alles dahinter steckt, und kann dann mit ein paar Zeilen Code z. B. ein Bild in Großdarstellung zeigen. ich aktiviere jetzt also zunächst einmal das jQuery-Framework, dann suche ich mir aus, von wo das geladen wird, entweder die mitgelieferte lokale Datei, oder ich kann auch direkt von den Google-APIs das Framework laden. Die sicherste Methode ist die mit lokalem Fallback. Und jetzt gebe ich an, welche Funktionalität ich genau einbinden will. In dem Fall ist das die colorbox. Natürlich sind das nur mitgelieferte Beispiele, man kann auch noch weitere eigene Funktionalitäten hinzufügen Das geht ein Stückchen weiter unten, in dem Feld Eigener JavaScript-Code. So, das war's soweit im Seitenlayout. Und jetzt gehen wir in die Artikel, dort auf unsere Startseite, da haben wir hier ein Text und ein Bild, und ich erstelle jetzt mal eine typische Situation, indem ich dieses Bild hier ausblende. dann oben diesen Text editiere und hier angebe, es soll ein Bild hinzugefügt werden. Ich suche noch die Quelldatei aus, da nehme ich jetzt das gleiche Bild, also das ist dieses hier gewesen. Einmal Klick auf Anwenden, Alternativer Text, und jetzt gebe ich hier an, das Bild soll nur, sagen wir 150 Pixel breit sein, das wird dann automatisch von Contao kleingerechnet. Jetzt gebe ich hier noch an, es soll bei Klick darauf, in einem neuen Fenster in Großansicht gezeigt werden. zum Layout noch, das Bild soll links vom Text erscheinen. Das bedeutet ich setzte noch einen Abstand von sagen wir 10 Pixeln auf der rechten Seite vom Bild. Diese Eingabefelder bedeuten Abstand oben, Abstand rechts, Anbstand unten, Abstand links. Gut dass ich es mir selber noch mal vorgelesen habe, wenn das Bild links ausgerichtet ist, dann sollte man den Abstand auch besser rechts machen. Okay, soweit haben wir das fertig, Speichern und schließen. Jetzt schauen wir uns das Ganze im Frontend an. Wir laden die Seite neu, das Bild ist jetzt hier links eingebettet in den Text, und wenn ich da drauf klicke, erscheint das in einem neuen Fenster in Großansicht. Vorteil hierbei ist, dass per JavaScript auch geprüft wird, wieviel Platz überhaupt hier in dem Browserfenster zur Verfügung steht. Ich werde mal das Browserfenster ein bisschen kleiner machen, und jetzt nochmal auf Großdarstellung klicken und Sie sehen, dass das Bild nur so viel vergrößert wird, wie auch Platz im Browserfenster da ist.

Contao 3 Grundkurs

Lernen Sie die Grundidee des Content Management Systems Contao 3 kennen und machen Sie sich mit den Möglichkeiten der Inhaltsdarstellung bis hin zum komplexen Webauftritt vertraut.

6 Std. 34 min (102 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!