Zukunftstag

jQuery, coole Moves fürs Web

Javascript, der Motor des Internets

Mit JavaScript können sich die (Web)Seiten verändern während man sie anschaut.

JavaScript schreibt man innerhalb des
<script></script>
Tags.

Funktionen einbinden

Meist benutzt man eine sogenannte Library - eine Sammlung von Funktionen in einer Datei.
Wenn man diese Datei in die eigene Webseite einbindet, kann man deren Funktionen nutzen.

jQuery Einbinden

jQuery ist eine der populärsten JavaScript-Libraries.
Nachdem man die jQuery-Datei aus dem Internet heruntergeladen hat kann man sie im Header seiner Webseite einbinden.
<script src="jquery.min.js "></script>

Das Wichtigste beim Programmieren

Computer sind total pingelig!!!
Leerzeichen an der falschen Stelle oder ein Groß- statt eines Kleinbuchstaben kann das Programm kaputt machen.

Ein guter Teil der Zeit beim Programmieren geht mit Debugging drauf.

Das Handwerkzeugs von jQuery
(und den meisten anderen Sprachen)

  • Werte können in Variablen gespeichert und verändert werden
  • Mit Schleifen können Aktionen mehrfach ausgeführt werden
  • Es können entweder/oder Abfragen gemacht werden
  • Es gibt vordefinierte Funktionen
  • Mehrere verschiedene Aktionen können in Funktionen zusammengefasst werden

Aufgabe

  • Um die folgenden Beispiele auszuprobieren, ruft das Entwicklerwerkzeug eures Browsers auf
    • Entweder im Menü (Tools - Entwicklerwerkzeuge)
    • Oder mit Strg+Shift+C
  • Wählt dann die Console zur Interaktion mit der Webseite aus

Vordefinierte Funktionen

(zum Ausprobieren )

alert("Hallo Welt");

1+3;

Variable (zum Ausprobieren)

var ergebnis = 3;
alert(ergebnis);
ergebnis = 5;
alert(ergebnis);

Schleife (zum Ausprobieren)

for (var i = 0; i < 3; i++) {
  alert("Hallo, ich mache alles mehrfach");
}

Abfrage (zum Ausprobieren)

var ergebnis = 1;
if (ergebnis == 1) {
  alert("Stimmt!");
} else {
  alert("Stimmt nicht!");
}

Funktion (zum Ausprobieren)

var sagsMir = function () {
  var ergebnis = 1+3;
  alert("Ich sage " + ergebnis);
}
sagsMir();

jQuery

Stellt eine ganze Reihe nützlicher Funktionen zur Verfügung

Vor allem zum Verändern von Seitenelementen

###Spezielle jQuery Funktionen ``` $("p").css("background-color","blue"); $("p").html("hallo Leute"); $("p").append(" Und hier kommt noch mehr Text "); ```
###Ausführen nachdem alle Elemente geladen sind ``` $(document).ready(function() { // Das hier wird getan nachdem die Seite geladen ist }); ```

Ausprobieren

  • Öffne deine Datei
  • Importiere jQuery
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" />
  • Schreibe eigenen Code
    <script>
      $(document).ready(function() {
        // Hier kommt dein Code hin
      });
    </script>

Viel Spaß beim Programmieren!

:)