Javascript Tutor - Lektion 22

Es gibt bestimmt viele Wege, um das Problem zu lösen. Eine Lösung wäre, zwei Werte an die Funktion zu senden...

<HTML>

<HEAD>

<TITLE></TITLE>



<SCRIPT language="javascript"><!--



function FruitBox(welchefrucht, fruchtname)

{

   window.document.myform.frucht[welchefrucht].checked = true;

   window.document.myform.frucht.value = fruchtname;

}



//--></SCRIPT>



</HEAD>

<BODY>



<FORM NAME="myform">

<INPUT TYPE="radio" NAME="frucht" onClick="window.document.myform.frucht.value = 'Orangen'">Orangen & Mandarinen<BR>

<INPUT TYPE="radio" NAME="frucht" onClick="window.document.myform.frucht.value = 'Bananen'">Bananen<BR>

<INPUT TYPE="radio" NAME="frucht" onClick="window.document.myform.frucht.value = 'Pfirsiche'">Pfirsiche, Nektarinen & Pflaumen<BR>  

Um Orangen zu wählen, <A HREF="javascript:FruitBox(0)">klicke hier</A>.<BR>

Um Bananen zu wählen, <A HREF="javascript:FruitBox(1)">klicke hier</A>.<BR>

Um Pfirsiche zu wählen <A HREF="javascript:FruitBox(2)">klicke hier</A>.<BR>

Um den aktuellen Wert zu sehen, <A HREF="javascript:alert(window.document.myform.frucht.value)">klicke hier</A>.

</FORM>




</BODY>

</HTML>

Versuch es.

Verstehst Du, wir das funktioniert? Studiere es solange, bis Du es verstehst.

Nach mal, wenn Du die Grundlagen verstanden hast wirst Du sehen, dass es mehrer Lösungswege gibt, die gleiche Aufgabe zu lösen. Es ist wichtig, zu verstehen, dass nur zählt, auch wenn man Dinge auf eine bessere Weise oder unproblematischere Weise oder effizientere Weise machen kann, dass die Sache funktioniert. Alle andere Diskussion kommt nach der Frage: "Funktioniert es?"

Lass uns einen Abstecher machen und einen Blick auf die Idee werfen, mehr als eine Variable an die Funktion zu senden.

Stell Dir folgendes vor...

<HTML>

<HEAD>

<TITLE></TITLE>



<SCRIPT language="javascript"><!--



function TueEtwas(teil1, teil2)

{

 alert(teil1 + teil2)

}



//--></SCRIPT>



</HEAD>

<BODY>



<A HREF="javascript:TueEtwas(1,'Rosen')">Klicke hier</A>



</BODY>

</HTML>

Versuch es.

Wir senden der Funktion 2 Werte. Die Funktion nutzt dann diese Werte für ihre Ausführung.

Übung: Baue ein Script mit fünf Links....

Peter
Paul
Marie
Hans
Anna

Jeder Link soll folgendes an die Funktion senden... Name, Alter und Lieblingsfarbe. Wenn Du auf einen Link klickst, geht ein PopUp Box auf, die folgendes anzeigt...

Peter ist 36 Jahre alt und seine Lieblingsfarbe ist rot.

Beachte, dass wir sagen "seine" Lieblingsfarbe. Marie und Anna sind weiblich, also sollte "ihre " Lieblingsfarbe gesagt werden. Baue das Script und finde heraus, wie Du das sein/Ihr Problem lösen kannst.

Hier ist eine Lösung.
Hier ist eine weitere Lösung.

Wie ich schon erwähnt habe, gibt es mehrere Wege für ein Lösung.

OK, gehen wir zurück zu Formularen und Javascript...

Übung: Erstelle ein Formular mit vier Radiobutton. Gibt jedem Button den Namen einer Farbe. Wenn der Nutzer einen Radiobutton auswählt, ändert sich die Hintergrundfarbe des Dokuments entsprechend. Hinweis: obwohl es verführerisch ist, Javascript Befehle direkt in den Link zu schreiben, kann dies etwas einschränkend sein. Nehmen wir an, Du möchtest etwas zur Funktion hinzufügen. Wenn alle Befehle im Link stehen musst Du jedes mal alle Links ändern, wenn Du das Script änderst. Wenn die Links zu einer Funktion verweisen, musst Du nur die Funktion ändern. Das im Hinterkopf, baue die Funktion so , das sie die ganze Arbeit macht.

Hier ist eine Lösung.

<< Zurück         Weiter >>
pagetutor.com


Invest in the future - Hug your kid today.