JavaScript

Schnell, dynamisch, erfolgreich

Die Dynamik innerhalb einer Website, die Interaktion der Besucher, wird ermöglicht durch den Einsatz von JavaScript. Dabei wird das Script direkt im Browser, also auf dem Rechner des Besuchers ausgeführt. Dies hat einen erheblichen Geschwindigkeitsvorteil, denn Veränderungen auf der Website müssen nicht erst vom Server hochgeladen werden. Hat der Besucher in seinem Browser JavaScript deaktiviert, werden viele Funktionen moderner Websites nicht mehr abrufbar sein. Beispielsweise wird die Validierung von Formularen durch JavaScript vorgenommen. Lightbox, Slider, Parallax, Smooth Scroll und Akkordeon sind Effekte, die ohne JavaScript nicht funktionieren.

farbmuster.js

$(document).ready(function(){
    $("button.show-class").show();
});

function afterText() {
	var txt1 = "<img id='animation-img1' src='Machaon1901-1200.jpg' height='240px' width='320px' alt='Schmetterling machaon' title='Bitte umdrehen' />";           // Create element with HTML
	$("h1").after(txt1);    // Insert new elements after hi
	var txt2 = $("<br/><button id='animation-button'></button>").text("Start Animation | zeigen und verbergen");  // Create with jQuery
	$("button#button-insert").after(txt2);    // Insert new elements after button
	var txt3 = "<div class='flip-box' id='animation-img2'><div class='flip-box-inner'><div class='flip-box-front'><img src='Schmetterling03-120x160.jpg' width='320' height='240' alt='Schmetterling03'></div><div class='flip-box-back'><img src='Machaon1901-1200flip.jpg' width='320' height='240' alt='Machaon1901'></div></div></div>";           // Create element with HTML
	$("img#animation-img1").after(txt3);    // Insert new elements after img1  
  $("button#animation-button").click(function(){
    $("div#animation-img2").toggle(3000);
    $("div#animation-img2").css("display", "inline-block");
  });
}

farbmuster.js

Haben Sie schon die Bauanleitung der Seiten "HTML" und "CSS" bewältigt, dann können Sie hier weitermachen, wenn nicht, dann gehen Sie erst zu diesen beiden Seiten. Danach geht es hier weiter: Kopieren Sie den Code oben und fügen Sie diesen in einem Editor auf einer leeren Seite ein. Speichern Sie die Datei unter dem Namen "farbmuster.js" in demselben Ordner, in dem auch schon die Dateien "farbmuster.html" und "farbmuster.css" liegen.

Desweiteren benötigen Sie drei Bilder, die Sie in dem selben Ordner legen. Die Bilder heißen: Machaon1901-1200.jpg, Machaon1901-1200flip.jpg und Schmetterling03-120x160.jpg. Sie können hier heruntergeladen werden.

Damit alles funktioniert müssen Sie online sein, denn die JavaScript-Bibliothek "jQuery" wird mit eingebunden. Diese Bibliothek ermöglicht es, das Programmieren zu verkürzen. Das spart Zeit.

Haben Sie dies alles erledigt erscheint neben dem Logo der Button "Start Animation". Klicken Sie ihn und Sie werden sehen.

Anmerkung: Sie sind jetzt fertig mit dem Bau. PHP kann nur im Zusammenhang mit einem Server ausgeführt werde. Deshalb sparen wir uns die weitere Programmierung.