Javascript Einführung

Gressly - Freimann - EU

Javascript Einführung

Einführung in Javascript

Lektion 1

Beginnen wir die Lektion gleich mit unserem ersten minimalen JavaScript Programm:

window.alert("Hallo Welt");

Die Zeilennummer ist dabei nicht einzugeben, dient bei größeren Programmen als Referenz.

Speichern wir obigen Text ab in einer Datei mit Namen meinErstesScript.js.

Den kompletten Download aller in dieser Lektion benötigten Dateien gibt es hier (erstesJS.zip).

Um unser Programm zu testen, erstellen wir die folgende minimale HTML Seite und speichern diese unter dem Namen meineSeite.html ab:

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>JavaScript</title>
  <script type="text/javascript" src="meinErstesScript.js"></script>
 </head>
 <body>
  JavaScript
 </body>
</html>

Legen Sie die beiden Dateien (meinErstesScript.js und meineSeite.html) ins selbe Verzeichnis und betrachten die HTML-Seite mit Ihrem bevorzugten Browser. Entweder öffnen Sie dazu die Seite mit "Datei öffnen", oder Sie installieren einen lokalen Webserver (z. B. XAMPP) und betrachten damit die HTML-Seite.

Bemerkung: Es gibt auch Techniken, den JavaScript-Code direkt in die HTML-Seite zu integrieren (Siehe hier). Das hat den Vorteil, dass Sie nur eine Datei zu erstellen haben. Wir bewegen uns aber danach auf dünnem Eis, denn wir mischen dann die Programmlogik mit dem Inhalt, was sich für mittlere oder größere Projekte verheerend auswirken kann. Also doch gleich vom Anfang an Korrekt ;-)

Haben Sie weder die Muße, weder die Zeit noch die nötigen Ressourcen, um obiges gleich selbst zu programmieren, so können Sie das Gelernte auch direkt der folgenden URL betrachten (Ein einfacher Klick reicht): meineSeite.html (falls dies Probleme gibt: unten weiterlesen...).

Beim Öffnen der HTML-Seite im Browser sollte nun ein Fenster mit der Meldung "Hallo Welt" erscheinen. Achtung Es gibt Stolpersteine:

Fehlerquelle 1: XML

Der Browser muss XHTML korrekt darstellen. Leider hat der Internet-Explorer in einigen Versionen hier einen Fehler: Er schlägt vor, die Seite herunterzuladen oder stellt nur den Quelltext der Seite dar. Entweder benennen wir die Seite in meineSeite.xhtml um (beachte "x") oder aber wir publizieren die Seite auf einem Webserver und ersetzen dabei die erste Zeile des HTML-Files durch folgenden PHP Code:

<?php
  $header_mime_type = "text/html"; // default
  $possible_mime_types = array("text/xml", "application/xml", "application/xhtml+xml");
  foreach($possible_mime_types as $test) {
    if ( stristr($_SERVER["HTTP_ACCEPT"], $test) ) {
      $header_mime_type = $test;
    }
  }
  header("Content-type: " . $header_mime_type . "; charset=utf-8");
?>
<?php echo "<?xml version=\"1.0\" encoding=\"utf-8\" ?>"; ?>

Falls es mit diesem Link meineSeite.html Probleme gibt (Internet Explorer) kann mittels obigem PHP-Skript evtl. Abhilfe geschaffen werden. Gleich probieren: meineSeite.php. Dies funktoniert jedoch erst mit einem installierten PHP Interpreter (z. B. Apache-Web-Browser).

Fehlerquelle 2: JavaScript aktivieren

Eine zweite Fehlerquelle ist ein deaktiviertes JavaScript im Browser. Ist JavaScript deaktiviert können wir unseren JavaScript Code natürlich nicht testen.

Fehlerquelle 3: Schreibfehler

Möglich sind natürlich immer Schreibfehler. Zum Beispiel könnten wir window.alert groß schreiben (Window.Alert). Dann funktioniert leider auch nichts. Solche Fehler sind aber meist in der Fehlerkonsole des Browsers zu finden.

Lektion 1b

JavaScript kann direkt in HTML eingebunden werden. Für kleine Codeschlipsel kann das durchaus von Vorteil sein. Damit es jedoch mit den meisten Browsern kompatibel ist, sind einige Kommentar- und XML-Steuerzeichen einzubauen:

<html>
  <head>
    <title>Javascript Intern</title>   
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    window.confirm("Alles in Butter?")
    //--><!]]>
    </script>
  </head>

  <body> 
    <h1>Javascript ins Dokument einbetten</h1>

  </body>
</html>

Lektion 2

Die Ein- bzw. Ausgabe in JavaScript kann auf verschiedene Arten implementiert werden. Die erste Art arbeitet mit window.prompt() und window.alert(). Die Ausgabe haben wir bereits in der ersten Lektion gesehen. In der Lektion 2a (hier klicken) kommt die Eingabe hinzu.

Die zweite Variante bedient sich HTML-Eingabefelder; als Ausgabe werden einfach Paragraphen <p> überschrieben oder angefügt. Dies wird anschließend in Lektion 2b (hier klicken) demonstriert.

EVA

EVA steht für Eingabe, Verarbeitung, Ausgabe und bezeichnet eines der wichtigsten Konzepte in der Informatik: Zurest werden Daten für die Verarbeitung eingelesen (= Eingabe). Diese Daten können vom Anwender erfragt werden, sie können aus einer Datenbank gelesen werden, sie können aber auch Ausgabe eines vorangehenden Prozesses sein. Im zweiten Schritt - der Verarbeitung - werden Operationen auf diesen Daten durchgeführt. Diese Operationen sind so mannigfaltig wie unsere Vorstellung. Es können einfache Grundrechenarten (zusammenzählen, dividieren, ...), statistische Berechnungen (Durchschnitt, Standard-Abweichung, ...) sein, bis hin zu komplexen Algorithmen, die z. B. den Schattenwurf in einem Animationsfilm berechnen. Im letzten Schritt - der Ausgabe - wird das Resultat angezeigt oder zur Weiterverarbeitung benutzt.

Bei diesen Berechnungen (im Verarbeitungsschritt) werden die Zwischenresultate in Variable gespeichert, die zu einem späteren Zeitpunkt wieder abgefragt werden können.

Ein solches EVA-Vorgehen könnte wie folgt aussehen, wenn wir z. B. in der Elektrotechnik den Ohm'schen Gesamtwiderstand zweier parallel geschalteter Widerstände berechnen sollten:

 // Eingabe:
 var r1, r2;
 r1 = einlesen("Erster Widerstand" );
 r2 = einlesen("Zweiter Widerstand");
 
 // Verarbeitung:
 var rgesamt;
 rgesamt = (r1 * r2) / (r1 + r2);

 // Ausgabe:
 ausgeben("Der Gesamtwiderstand beträgt " + rgesamt + "Ohm.");

Hierbei handelt es sich übrigens um eine einfache Programmierübung aus dem Buch "Programmieren lernen" zur Webseite www.programmieraufgaben.ch

Lektion 2a

In dieser Lektion werden die Funktionen window.alert() und window.prompt() erklärt.

Eingabe

Im Einführungsbeispiel wurde fürs Einlesen einfach eine Methode einlesen() aufgerufen. Diese existiert so nicht in JavaScript. Es existieren jedoch die beiden Funktionen window.prompt() und window.confirm().

prompt()

Zur Eingabe von Zeichenketten (Strings) bietet sich das Eingabefenster window.prompt() an. Der Aufruf ist wie folgt:

x = window.prompt("Bitte ... eingeben.");

Anstelle der drei Punkte wird dem Anwender erklärt, was seine Eingabe zu bedeuten habe. Nach dieser Anweisung befindet sich in der Variable x der vom Anwender eingegebene Wert. Achtung: JavaScript liest ausschließlich Zeichenketten ein. Damit wir unsere Eingaben als Zahlen auffassen können bietet sich folgender Trick an:

var x;
x = window.prompt("Geben Sie eine Zahl ein");
x = 1.0 * x;

Dabei wird die Zeichenkette einfach mit der Zahl "1.0" multipliziert und wird ab jetzt als Zahl und nicht mehr als Zeichenkette aufgefasst.

Der vollständig Code für die Parallerschaltung mittels window.prompt() sieht also wie folgt aus:

// Eingabe:                                                                     
var r1, r2;
r1 = window.prompt("Erster Widerstand" );
r1 = 1.0 * r1;
r2 = window.prompt("Zweiter Widerstand");
r2 = 1.0 * r2;

// Verarbeitung:                                                                
var rgesamt;
rgesamt = (r1 * r2) / (r1 + r2);

// Ausgabe:                                                                     
window.alert("Der Gesamtwiderstand beträgt " + rgesamt + " Ohm.");

Lektion 2b

Wir haben gesehen, dass mittels window.prompt und window.alert() das Grundkonzept EVA (Eingabe, Verarbeitung, Ausgabe) bereits ausgeschöpft ist. Wir könnten nun jedes Programm aus diesen beiden Befehlen zusammensetzen.

Leider ist dies nicht besonders schön. Viele Benutzer mögen es gar nicht, wenn Fenster zum Vorschein kommen. Hier bietet sich eine schöne - wenn auch für uns Programmierer nicht mehr ganz simple - Alternative an: Auslesen von HTML-Textfeldern und Überschreiben von "Ausgabe-Paragraphen".

input-Felder

In HTML existieren Eingabefelder. Die HTML-Syntax für die Eingabefelder lautet <input type="text" />.

Doch, wie erfahren wir als Programmierer, dass unsere Anwenderin einen Text in das Feld eingegeben hat? Hier gibt es diverse Möglichkeiten:

onchange	Wert geändert	Sobald ein neuer Wert im Feld steht, werden wir benachrichtigt.
onclick	Maus geklickt	Wenn der Anwender auf eine Komponente klickt, werden wir benachrichtigt. Wir verwenden dies üblicherweise auf einem Eingabefeld vom Typ "button" (Schaltfläche) neben dem eigentlichen Eingabefeld.
onkeyup	Taste losgelassen.	Jedesmal, wenn unsere Anwenderin ein Zeichen in unser Feld eingegeben hat und nun die Taste wieder loslässt, erhalten wir eine Meldung.

Die Liste ist lange nicht vollständig. Eine vollständige Liste findet sich hier (HTML-EventHandler). Ja, warum heißen die übrigens "Eventhandler"? Sie behandeln (handle) ein Ereignis (event)!

Wir verwenden für unser Beispiel den Handler onkeyup. Jedesmal wenn der Fokus im Textfeld ist und eine Taste gedrückt wurde, rufen wir unsere Verarbeitungsmethode (start()) auf (Siehe Zeile 11).

HTML ID

Eine wichtige Rolle beim Lesen und Schreiben direkt ins HTML Dokument spielen die IDs. IDs sind Markierungen (Attribute), welche ein HTML-Tag (z. B. <p>) eindeutig identifizieren.

Hier zunächst das HTML Dokument (index.php):

<!DOCTYPE html>
<html>

  <head>
    <title>Javascript InOut</title>
    <script type="text/javascript" src="dollarRechner.js"></script>
  </head>

  <body>
    <h1>Franken Dollar Umrechner</h1>
    <input id="eingabeID" type="text" onkeyup="start()" />
    <p     id="ausgabeID" />
  </body>

</html>

Beachten Sie auf Zeilen 11 und 12 die vergebenen IDs; diese werden im zugehörigen Javascript wieder verwendet, um auf die Elemente zuzugreifen (dollarRechner.js):

function start() {
  var chf = eingabe();
  var dollar = verarbeitung(chf);
  ausgabe(dollar);
}

function eingabe() {
  var inputFeld = document.getElementById("eingabeID");
  var chf       = inputFeld.value;
  return chf;
}

function verarbeitung(chf) {
  return 0.9 * chf;
}

function ausgabe(ausgabe) {
  var ausgabePara = document.getElementById("ausgabeID");
  ausgabePara.innerHTML = ausgabe;
}

Beachten Sie des weiteren, dass nun alle Anweisungen innerhalb von Funktionen stehen. Die Funktion start() soll ja erst aufgerufen werden, wenn die Anwenderin etwas ins Eingabefeld eingibt. Beachten Sie zuletzt, dass auch die Funktion start() ihrerseits selbst Funktionen (hier eingabe(), verarbeiten() und ausgabe()) aufruft.

Hier (lektion2b) können Sie obigen Code live miterleben.

Oder laden Sie die beiden Dateien von hier (dollar.zip) herunter, um den Code zu studieren.

Philipp

Home > Philipp