Wikiraum

Benutzer-Werkzeuge

Webseiten-Werkzeuge


Das erste Programm - Einführung in JavaScript

Werkzeuge

  1. Browser zur Ausführung deiner Programme (Datei öffnen)
  2. Editor zum Schreiben deiner Programme (Notepad oder phase5)
  3. Speicherort für deine Programme (am besten hier im Wiki)

Grundstrukturen in der Arbeit

Im Editor muss immer mindestens dieses Grundgerüst stehen:

grundstruktur.html
<html>
<head>
<title>Titel des Fensters im Browser</title>
<script language="JavaScript">
 
Hier kommt der Code hinein
 
</script>
</head>
 
<body>
 
</body>
</html>

Die Bezeichnungen in den Spitzklammern <> nennt man Tags (englische Aussprache). Tags sagen dem Browser, was er mit den Inhalten zwischen den Tags machen soll. Es gibt sehr viele Tags - eine Übersicht findest du hier:

Schonmal zum Merken: Tags sind nichts weiter als Klassen für Objekte, die ich später mit JavaScript ansteuern und manipulieren kann.

WICHTIG: Wenn du etwas abspeicherst, musst die immer mit der Dateiendung „.html“ speichern, sonst zeigt dir dein Browser nur Text an.

Aufgaben: Variiere das Grundgerüst, indem du neue Tags zwischen den body-Tags ausprobierst - das geht fast so wie hier im Wiki, z.B.:

variation.html
<html>
<head>
<title>Titel des Fensters im Browser</title>
<script language="JavaScript">
 
</script>
</head>
 
<body>
 
<b>fett</b><br>
<u>unterstrichen</u><br>
<i>kursiv</i>
 
</body>
</html>

Javasript

Zwischen die Script-Tags kann man nun ein eigenes, kleines Programm setzen. Hier findest du ein Beispiel:

alert.js
alert('Hallo Welt');

Nochmal: Das muss zusätzlich mit hinein, also

komplett.html
<html>
<head>
<title>Titel des Fensters im Browser</title>
<script language="JavaScript">
 
alert('Hallo Welt');
 
</script>
</head>
 
<body>
 
</body>
</html>

Hier wird es schon etwas komplexer (Quelle: http://www.vom-hau.de/Javascript/formular.html

komplett.html
<html>
<head>
<title>Titel des Fensters im Browser</title>
 
<script language="JavaScript">
 
function EuroUmrechnung(){
 
   var DMBetrag, EUROBetrag; // wir erstellen zwei Variablen
 
   DMBetrag = document.Umrechnung.DM.value;
 
   /*
 
   Jetzt wird es objektorientiert.
   Wir wollen im Hauptdokument (document) im Formular "Umrechnung" das
   Objekt mit dem Ńamen "DM" ansprechen, also: document.umrechnung.DM
   Wir lesen hier das Attribut "value" aus.   
   */
 
   EUROBetrag = DMBetrag / 1.95583; // jetzt rechnen wir um
 
   document.Umrechnung.EURO.value=EUROBetrag;
 
   // Wir setzen den entsprechenden Wert auf unser Rechenergebnis.
 
}
 
</script>
</head>
 
<body>
 
<br>
<form name="Umrechnung">
 
<!-- Hier ist Formular mit dem Namen "Umrechnung" -->
 
Eingabe in DM:<input type="text"  size="10"  name="DM">
 
<!-- Hier ist Formularelement mit dem Namen "DM" -->
 
<br>
<input type="BUTTON" value="Rechne um" onclick="EuroUmrechnung()">
<br>
 
Ausgabe in Euro:<input type="text"  size="20"  name="EURO">
<!-- Hier ist Formularelement für die Ausgabe -->
 
</form>
 
</body>
 
</html>

Aufgaben:

  1. Füge ein zweites Ausgabefeld in den HTML - Text ein : „Dollar“. Ergänze die Funktion, so dass auch der entsprechende Dollar - Betrag angezeigt wird. (Lösung)
  2. Füge einen zweiten Button ein mit der Beschriftung: „Rechne zurück“. Schreibe hinter die Funktion „EuroUmrechnung“ eine zweite Funktion „DMUmrechnung“, die den Euro- Betrag in DM umrechnet. (Lösung)
  3. Lust bekommen: Dann hier oder hier weitermachen und experimentieren!