Was JavaScript, jQuery und Bootstrap mit Besen, Staubsauger und Saugroboter gemein haben

Unsere Putzfrau ist in den Ferien. Warum ich das erwähne? Ganz einfach, während ich diesen Blog-Beitrag schreibe, sollte ich gleichzeitig die Wohnung putzen. Sie können mir grad dabei helfen und lernen, was ein Besen, ein Beutel-Staubsauger und ein Roboter-Staubsauger mit JavaScript, jQuery und Bootstrap gemeinsam haben.

Und – wichtig – warum ich alle drei Helfer zu Hause bzw. in meinen Webapplikationen drin habe und mich nicht nur auf einen alleine verlasse.

Auf ans Werk!

Sich einen Überblick verschaffen

Geht es um Web-Applikationen, bin ich versiert: ich schnappe mir Bootstrap und lege los.

Wenn Sie jetzt schon «Bahnhof» verstehen, lesen Sie einfach weiter, dann lernen Sie dieses Wunderding namens «Bootstrap» noch kennen.

Wenn Sie sich dazu gemerkt haben, dass im Titel doch auch noch «JavaScript» und «jQuery» stehen und ich mir das gar noch nicht «geschnappt» habe, dann lesen Sie unbedingt weiter, denn Sie interessieren sich scheinbar für die Materie!

Beim Hausputz muss ich etwas strategischer vorgehen und mir erst einmal eine Auslegeordnung machen, um zu wissen, was wir denn so alles an Reinigungs-Utensilien zu Hause haben:

• Da wären als erstes «Schüfeli und Beseli» (=schweizerdeutsch für ein Kehrset bestehend aus einer kleinen Schaufel und einem kleinen Besen). Handlich und praktisch. Geeignet, um schnell mal etwas zusammen zu kehren und in den Abfalleimer zu befördern.
• Dann steht bei uns im Estrich ein ganz normaler Staubsauger. Das Modell mit Kabel für die Stromzufuhr, Schlauch, Rohr und Beutel.
• Last but not least, wartet unter der Couch auf seiner Ladestation ein Staubsauger-Roboter auf seinen im Voraus programmierten Einsatz.

Vielleicht geht es Ihnen ja so beim Erstellen von Web-Applikationen wie mir beim Wohnungsputz: Welche von all den vielen angebotenen Dingen soll man nehmen? Wozu dienen Sie genau? Welches brauche ich wirklich und welches kann ich weglassen?

Erst einmal «Schüfeli & Beseli» handhaben können

Fangen wir bei den Basics an. Bei dem, was man so oder so braucht: JavaScript.

JavaScript gibt es seit 1995 und wird es wohl immer geben. Zumindest so lange es Web-Applikationen geben wird. JavaScript ist die Standard-Programmiersprache für Webseiten.

Wollen Sie nur ein Putzutensil zu Hause? Dann kaufen Sie sich «Schüfeli & Beseli».

Wollen Sie nur eine Programmiersprache lernen? Lernen Sie JavaScript!

Beim Kehrset ist prinzipiell schon alles da, was man zum Putzen braucht: zusammenkehren, sammeln, entsorgen. Der Beutelstaubsauger macht eigentlich dasselbe. Er sammelt einfach mit Hilfe von Strom statt mit Muskelkraft. Und wenn Sie schon mal einem Roboter-Staubsauger zugesehen haben, können Sie sich bestimmt an mindestens einen kleinen sich drehenden Besen erinnern.

So ist es auch bei JavaScript: grundsätzlich schon alles da.

Mit JavaScript können Sie nämlich…

• die Struktur (HTML) Ihrer Website verändern
• das Aussehen (CSS) Ihrer Website verändern
• Logik (Entscheidungen, Bedingungen, etc.) programmieren
• zeitgesteuert programmierte Logiken ausführen
• auf Ereignisse wie z.B. einen Maus-Klick reagieren

Und eigentlich ist das alles, was Sie für eine Web-Applikation brauchen!

Ein Fachbegriff, der in diesem Kontext immer wieder zu lesen ist: «DOM-Manipulation». Da grad erst vor kurzem der Dom zu Notre Dame in Paris abgebrannt ist, möchte ich hier explizit darauf hinweisen, dass mit «DOM» das «Document Object Model» – sozusagen der «Knochenbau» einer Website – gemeint ist.

Fazit: Wenn Sie das DOM manipulieren können, können Sie eine Webapplikation schreiben. Zumindest die Client-Seite davon.

Wenn Sie jetzt also – so wie ich eigentlich – dringend etwas anderes machen sollten, wäre hier durchaus ein möglicher Punkt, mit dem Lesen aufzuhören. Wenn Sie aber weiterlesen möchten, dann bin ich auch dabei – und schreibe weiter.

… dann die Staubsauger benutzen.

Schön, dass Sie weiterlesen. Vielleicht ja, weil Ihre Wohnung nur mühsam mit einem Kehrset alleine sauber zu halten ist. Da spart ein Staubsauger schon einiges an Zeit!

Drum bezeichne ich Bootstrap und jQuery hier als Staubsauger: sie sparen Zeit!

Grundsätzlich arbeiten Sie aber wie ein «Schüfeli & Beseli»-Set.

Zwischenbemerkung für alle Versierten: Ich nenne hier Bootstrap in einem Atemzug mit JavaScript und jQuery, weil Bootstrap zwar als (reines) CSS-Framework seine Karriere begonnen hat, aber wenn heute jemand unter www.getbootstrap.com auf «get started» klickt, gibt es da ein (1!) CSS-File zu verlinken und drei (3!) JavaScript-Files.

Die Frage stellt sich: wobei genau sparen diese Frameworks Zeit?

jQuery: Staubsaugen von Hand

Sie kennen das: der Besuch kommt in 20 Minuten und der Roboterstaubsauger ist (wieder einmal?) nicht aufgeladen. Gut, dass noch ein ganz normaler Staubsauger im Estrich steht.

Wie oben erwähnt, können Sie gut ihre Wohnung von Hand sauber halten. Sie können sich aber auch den Aufwand erleichtern und mit dem Staubsauger durch die Wohnung düsen.

So können Sie auch alles mit JavaScript (von Hand) ausprogrammieren oder Sie lassen sich von jQuery vieles an Arbeit abnehmen:

Mit jQuery schreiben Sie z.B.:

$('#zielElement').html('Hallo Welt');

statt wie mit JavaScript

document.getElementById('zielElement').innerHTML = 'Hallo Welt';

Wollen Sie ein Element auf Ihrer HTML-Seite innerhalb von fünf Sekunden einblenden, schreiben Sie in jQuery:

$('#zielElement').fadeIn(5000);

Und wollen Sie, dass das Element sich nach dem Anklicken mit der Maus wieder ausblendet, dann geht das mit:

$('#zielElement').click(function(){

$(this).fadeOut(5000);

});

Die entsprechenden (reinen) JavaScript-Codes für diese zwei Manipulationen erspare ich Ihnen! Dafür reicht die Zeit nicht! Sie wissen ja, ich sollte noch die Wohnung putzen.

In meinen jQuery-Kursen zeige ich Ihnen den Unterschied aber gern detailliert, weil sich viel daraus lernen lässt. Wenn Sie jetzt schon mehr möchten, können Sie im Anschluss an diesen Blogbeitrag noch diesen hier lesen:

JavaScript, jQuery und AngularJS im Vergleich

Bootstrap: Staubsaugen lassen

Um vor lauter Blog-Schreiben das Putzen der Wohnung nicht ganz zu vernachlässigen, habe ich schon mal unseren Roboter-Staubsauger via Handy-App gestartet. Er arbeitet jetzt fleissig im Wohnzimmer, während ich noch fertig schreibe.

Fassen wir kurz zusammen, damit klar wird, worauf ich hinaus will:

JavaScript brauchen wir so oder so.

Auch jQuery ist in JavaScript geschrieben. Wer kein JavaScript kann, wird mit jQuery irgendwann an seine Grenzen kommen. Lesen Sie dazu auch:

jQuery oder JavaScript? Das ist nicht die Frage

Eine Aufgabe von JavaScript ist die DOM-Manipulation. jQuery vereinfacht diese wesentlich.

Vergleichen Sie dazu auch:

Eine JavaScript- & jQuery-Spielerei mit grossem Lerneffekt

Und was ist jetzt Bootstrap?

Wie bereits oben erwähnt, hat Bootstrap seinen Siegeszug als reines CSS-Framework angetreten. Es hat sich also ursprünglich rein um das Aussehen von HTML-Elementen gekümmert. Mittlerweile kommt es aber ohne JavaScript nicht mehr wirklich aus, wenn es sein volles Potential entfalten möchte.

Doch im Gegensatz zu jQuery, muss in Bootstrap nicht programmiert werden.

Es reicht, einem Element zu sagen, welcher CSS-Klasse es angehört und ihm (für wildere Sachen) ein bis zwei weitere Attribute zu geben. Den Rest übernimmt das Bootstrap-Framework.

Mit Staubsaugern erklärt:

Sie «sagen» dem Roboter-Staubsauger, welches Zimmer er saugen soll, fertig.

Folgender Code (das Wichtige in Fettschrift) zeigt, wie man beim Klick auf einen «Öffnen»-Hyperlink einen Dialog einblenden und ihn beim Klick auf einen «Schliessen»-Hyperlink wieder ausblenden könnte:

mit jQuery

<style>

 … ganz viel CSS-Code … 

</style>

<!-- Button trigger modal -->

<a id="openlink">öffnen</a>

<!-- Modal -->

<div id="dialog">

       … Inhalt …

     <a id="closelink">Schliessen</a>

</div>

<script>

  $("#openlink").click(function(){

    $("dialog").slideDown(5000);

  });

  $("#closelink").click(function(){

    $("dialog").slideUp(5000);

  });

</script>

mit Bootstrap

<!-- Button trigger modal -->

<a data-toggle="modal"    
   data-target="#ziel">öffnen</a>

<!-- Modal -->

<div class="modal fade" id="ziel">

       … Inhalt …

     <a data-dismiss="modal">Schliessen</a>

</div>

Den Code kurz erklärt: Mit jQuery müssen Sie explizit sagen, was Sie und wie Sie es erreichen wollen. Mit Bootstrap ordnen Sie den HTML-Elementen einfach die gewünschten Attribute zu. Der Code rechts fällt entsprechend schlanker aus.

Mit Fachbegriffen um sich geworfen: Mit jQuery löst man eine DOM-Manipulation funktional. Mit dem Bootstrap-Framework deklarativ. Nochmals mit Staubsaugern:

Mit jQuery eliminieren Sie Staub zwar schneller, als mit JavaScript, Sie arbeiten aber immer noch von Hand. Mit Bootstrap lassen Sie staubsaugen.

Das Finishing 

Mittlerweile ist mein fleissiger Helfer mit dem Wohnzimmer fertig. Sieht grundsätzlich super aus. Hinter der Stehlampe ist er wohl nicht hingekommen. Dort hat es noch etwas Dreck. Den werde ich mit «Schüfeli & Beseli» schnell noch weg machen.

Vorher stelle ich den Robo-Sauger aber noch ins Büro und lasse ihn dort seine Arbeit erledigen, während ich dann mit dem Beutel-Staubsauger den Eingangsbereich sauge. Dort ist der Roboter so oder so jeweils überfordert. Nicht wegen der Anzahl Schuhe meiner Partnerin! Nein, auf keinen Fall! Würde ich nie zu behaupten wagen!

Wie Sie sehen, habe ich alle drei Putz-Utensilien im Einsatz. Ohne Kehrset geht es nicht und ein ganz normaler Hand-Staubsauger ist oft einfach schneller, wenn es um Spezial-Einsätze geht. Den Rest macht der Robo-Sauger automatisch, ganz nach seinen Möglichkeiten – nicht mehr und nicht weniger.

So ist es auch mit den beschriebenen Technologien:

Ohne JavaScript geht es nicht und ein paar Zeilen jQuery sind oft nötig, wenn es um Spezial-Einsätze geht. Den Rest erledigt Bootstrap automatisch, nach seinen Möglichkeiten.

Übrigens, nochmals zur Repetition: Bootstrap nutzt jQuery, welches wiederum in JavaScript geschrieben ist.

Somit: Guten Frühlingsputz!