Persönliche Farbe für den Hintergrund

Manchmal möchte der User, z. B. wegen des besseren Kontrasts, eine andere Hintergrundfarbe. Du als guter Programmierer bietest das narürlich an!

Farben kann man entweder

 

Der Java-Script Code sieht zunächst auch wieder genau so aus und hat auch die gleichen Funktionen. Es kommt aber ein neuer Befehl hinzu: document.bgColor

Gelbe Zeile

function usereingabe(){
var farbe = window.prompt("Geben Sie eine Farbe oder eine 6-stellige Nummer nach einer ''#'' ein:","");
window.alert('Sie haben als Farbe "' + farbe + '" eingeben.');
document.bgColor = farbe
}

Gelbe Zeile

Ab hier lasse ich die üblichen gelben Zeilen weg. Du weißt hoffentlich, dass du sie in deiner Datei setzten musst!

Diese Zeilen = das sogenannte Java-Script Grundgerüst kannst du in unserem HTML-Studio (unser Html-Editor!) ganz schnell erzeugen:

Ab jetzt ist ganz wichtig:

Achte auf die Schreibweise!

In document.bgColor ist das "C" groß geschrieben und muss auch so geschrieben werden, sonst funktioniert der Befehl nicht!

Na, schau dir die Programmierung an. Kriegst du heraus, wie es funktioniert?

Aufgaben:

 

Persönliche Farbe für den Text

Hier der Code:

function textfarbe(){
var farbe = window.prompt('Geben Sie eine Farbe oder eine 6-stellige Nummer nach einer "#" ein:','');
window.alert('Sie haben als Text-Farbe "' + farbe + '" eingeben.');
document.fgColor = farbe
}

Du siehst, es hat sich nur der Befehl document.bgColor in document.fgColor geändert. f = front und g = ground
Hier zeigt sich, dass es in Html zwei Farbebenen gibt: Background und Frontground. Die Schriftfarbe erscheint also eigentlich in der "Vordergrundfarbe". Dies Überlagerungsprinzip kennt man ja auch von Grafikprogrammen.

Ach ja: Und natürlich musste ich für die Funktion einen eigenen Namen erfinden. Ich habe sie textfarbe() genannt.

Aufgabe:

  • Änder doch auch einmal den Funktionsnamen bei der Hintergrundsfarben-Funktion von usereingabe() in hintergrundfarbe()
    Wenn du dies nicht nur in der Funktion, sondern auch im entsprechenden button erledigst, müsste eigentich alles genauso funktionieren.
  • Kombiniere beide Gestaltungsmöglichkeiten in einer Datei.
  • Achtung:
  • Beide Funktionen müssen zwischen den gelben Zeilen stehen!
  • Die beiden Funktionen nicht durchmischen!
  • Nun noch etwas Erklärung. Es geht um den Punkt. In Java-Script kann man Befehlsketten aufbauen, indem man die einzelnen Befehle durch einen Punkt trennt/verbindet. Das kennst du schon von dem Befehl Window, dem über einen Punkt die Befehle alert() oder prompt('','') angehängt werden. Dasselbe gilt für document. Auch hier lassen sich Befehle, wie eben bgColor und fgColor über einen Punkt anhängen. Willst du mehr wissen? Hier1

     

    Kurztest:
    Schreibe den Java-Script-Befehl für die Hintergrundfarbe in der richtigen Schreibweise:
    Welches Zeichen verbindet in Java-Script Befehlsketten? (nicht das Wort, sondern wirklich das Zeichen eintragen!)

     


    1http://de.selfHtml.org/javascript/sprache/objekte.htm#vordefinierte