Javascript Tutor - Lektion 9

Verschachtelte if-then Anweisungen...


<HTML>

<HEAD>

<TITLE></TITLE>



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



function Hello()

{

   x = prompt("Gib mir eine Zahl","");



   if (x == 6)

   {

      alert("Wow! " + x + " ist gleich 6!");

   }

   else

   {

      if ( x > 4)

      {

         alert("Hallo Kinder, " + x + " ist größer als 4!");

      }

      else

      {

         alert("Hallo Kinder, " + x + " ist NICHT größer als 4!");

      }

   }

}



//--></SCRIPT>



</HEAD>

<BODY>



<A HREF="javascript:Hello()">Klicke hier</A>



</BODY>

</HTML>

Versuch es.

Zuerst testen wir, ob x==6 ist (Ich erkläre das doppelte Gleichheitszeichen in einer Minute). Wenn x==6, dann erhalten wir die Nachricht. Wenn x nicht gleich 6 ist, dann haben wir ein Paar von if-then Anweisungen, die testen, ob x größer oder kleiner als 4 ist. Studiere diese Beispiel solange, bis Du es verstehst.

Und nun zum doppelten Gleichheitszeichen. Lass es mich so erklären...


  x = 6     der Wert von x ist jetzt 6 (Zuweisung)

  x == 6    x ist gleich 6 (Test auf Gleichheit)

Weil wir gerade dabei sind....


  x > 6    x ist größer als 6

  x < 6    x ist kleiner als 6

  x >= 6   x ist größer oder gleich 6

  x <= 6   x ist kleiner oder gleich 6

  x != 6   x ist ungleich 6

Übung: Erstelle eine Seite, die das Folgende macht: Wenn man auf den Link klickt, geht eine Popup-Box auf und fragt nach einer Zahl. Wenn diese Zahl kleiner als 100 ist, zeige eine Popup-Box an, die Deine Zahl sagt: "Deine Zahl lautet 28.". Wenn diese Zahl größer als 100 ist, zeige eine Popup-Box an, die sagt: "Oh Gott, Deine Zahl ist zu groß für mich.". Wenn diese Zahl genau 100 ist, zeige eine Popup-Box an, die sagt: "Bing, Deine Zahl ist genau 100.".

Hier ist eine Lösung.

Übung: Ändere Deine letzte Übung so, dass Du die Zahl aus einem Texteingabefeld anstatt aus einer Eingabe-Popupbox erhältst.

Hier ist eine Lösung.

Übung: Ändere Deine vorletzte Übung (mit der Popup-Box) so, dass, wenn diese Zahl kleiner 100 ist, die Seitenfarbe auf GELB wechselt. Wenn diese Zahl gleich 100 ist, wechselt die Seitenfarbe auf GRÜN, wenn diese Zahl gleich 100 ist, wechselt die Seitenfarbe auf BLAU und es öffnet sich eine Popup Box, die sagt: "Bingo!..." und... wenn diese Zahl größer als 500 ist, wechselt die Seitenfarbe auf ROT und eine weitere Popup-Box öffnet sich und fordert eine kleinere Zahl und alles fängt von vorn an. Hinweis: um "wieder von vorn anzufangen", müssen wir die Funktion selbst aufrufen.

Diese ist eine Übung in Logik. Programmieren ist eine Übung in Logik. Dies ist ein wenig schwieriger als das Kopieren-und-Einfügen von Javascript. Das wird Deinem Gehirn weh tun ;-)

Hier ist eine Lösung.

Früher haben wir den Wert aus einem Texteingabefeld gelesen...


x = window.document.form.input.value;

Wir können auch den Wert eines Texteingabefeldes setzen ...


<HTML>

<HEAD>

<TITLE></TITLE>



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



function SetTheBox()

{

   window.document.myform.mytextbox.value = 5;

}



//--></SCRIPT>



</HEAD>

<BODY>



<FORM NAME="myform">

<INPUT TYPE="text" NAME="mytextbox" VALUE="">

</FORM>



<BR><A HREF="javascript:SetTheBox()">Klicke hier</A>.



</BODY>

</HTML>

Versuch es.

Übung: Ändere das obige Beispiel so, dass Du den Wert aus einer Eingabe-Popupbox erhälst und in ein Texteingabefeld schreibst. Füge auch eine Schaltfläche (type "button") hinzu und nutze das Ereignis "onClick"...


<INPUT TYPE=button onClick="myfunction()">

Hier ist eine Lösung.

Übung: Erstelle 3 Texteingabefelder wie folgt...

=

Packe vier Schaltflächen darunter: Addieren, Subtrahieren, Multiplizieren und Dividieren. Jede Schaltfläche soll den Wert der ersten beiden Eingabefelder auslesen, die entsprechende Rechenoperation ausführen und die Antwort in das dritte Eingabefeld ausgeben.

Hier ist eine Lösung.

Übung: Füge zur letzten Übung ein viertes Texteingabefeld hinzu...

=

Ändere die Funktionen so, dass sie das entsprechende Rechenoperationszeichen in dieses vierte Feld schreiben ( + - * / ) .

Hier ist eine Lösung.

<< Zurück         Weiter >>
pagetutor.com


Invest in the future - Hug your kid today.