JavaScript für Einsteiger Teil 2
Hallo zum zweiten Teil des tollen Java-Script Tutorials/Workshop ;)Mir is noch eingefallen das es auch eine Möglichkeit gibt Funktionen zu kombinieren.
Ich würd euch raten bevor ihr das hier alles durchmacht, checkt den ersten Teil dieses JavaScript Tutorials durch. Nennt sich "JavaScript für Einsteiger".
Guut also weiter gehts:
Mehrere Funktionen kombinieren
Mir is irgndwie kein besseres Script eingefallen als nen Hintergrundfarbenwechsler, aber ich denke damit werdet ihre verstehen wie man Funktionen kombiniert und gleichzeitig den Aufbau eines Umfangreicheren Scripts als im ersten Teil verstehen.
Dazu benötigen wir einmal das Attribut:
document.bgColor="Farbenname"
Damit wird einfach die Hintergrundfarbe festgelegt. Ist genau das gleiche wie <body bg color"farbname"> nur halt als Javascript Code.
Falls ihr euch jetz fragt wieso denn nicht gleich <body bg="color">, kann ich euch sagen das ich mit den JavaScript Code einfach mehr Sachen machen kann.
Ajo, is derzeit no net so wichtig aber das "document-Objekt" das wir hier oben haben, wird nicht nur mit bgColor verwenden. (also net nur document.bgColor sonder auch zB.: document.write) aber dazu kommen wir später.
Soda(nicht das Soda Wasser gemeint, sondern wird in der österreichischen Sprache gebraucht als "na denn" oder wie unsre Nachbarn dazu sagen), als erstest legen wir alle Funktionen fest:
<script language="JavaScript">
function rot() {
document.bgColor="red";
}
function gelb(){
document.bgColor="yellow";
}
function blau(){
document.bgColor="blue";
}
</script>
So ich habe hier einmal jeder Funktion eine Hintergrundfabre zugewiesen (rot, gelb, blau). Ich könnte auch anstatt den Englsichen Bezeichnung einen Hex-Code verwenden.
Dieser Teil wird meistens in den <head> Bereiches eined HTML-Dokuments geschrieben.
So jetz brauchen wir ein paar Schaltflächen mit denen wir die Funktionen aufrufen können (siehe auch "JavaScript für Einsteiger"):
<form>
<input type="button" value="rot" onClick="rot()"/>
<input type="button" value="gelb" onClick="gelb()"/>
<input type="button" value="blau" onClick="blau()"/>
</form>
Also da haben wir wieder 3 Schaltflächen + "onClick" Funktion, wie im ersten Teil. Das kommt dann logischerweise in den <body> Bereich des HTML-Dokuments.
Das wars eigentlich schon, wollt ich nur zum letzn Tutorial hinzufügen.
Beim nächsten Mal wirds dann etwas Interessanter, mit Passwört, und wie man Browserinfos herausbekommt ;)
Bei Fragen wie immer an mich oder an die Webstylez.net - Community.
Bis nächstes Mal!
mfg
Matthias aka -xXx-
Kommentare