Zum Inhalt

Inhaltsverzeichnis • Teil 1 - Anfänger • Dynamik • Programme verstehen
⇦ Dynamik / Dynamisches HTML ⇨
30.07.2014 09:39:59

Programme verstehen

Bauanleitung

Programme sind eine Ansammlung von Anweisungen, die ein Computer oder anderes Programm ausführt. So etwa wie eine Bauanleitung, die Anweisungen für einen Menschen enthält, etwas bestimmtes zusammenzubauen. Bewegen wir uns also in dieser Analogie.

Brainstorming:

Was steht in einer Bauanleitung? Schreiben sie kurz (ohne nachzudenken) ihre Gedanken auf einen Zettel.

(Brainstorming Bauanleitung)

Ein Bauanleitung (hier das Beispiel Tisch) ist wie folgt strukturiert:

Definitionen

Benutze
Werkzeug und Material das nicht beiliegt (also extern zu besorgen ist).
Inhalt
Werkzeug und Material das beiliegt und bem Aufbauer bekannt zu machen ist.

Elemente des Arbeitsablaufs

Anweisungen
Konkrete Arbeitsanweisungen für den Aufbauer
Unteranweisungen
Komplexere Tätigkeiten werden zusammen­gefasst und als ein Schritt in den Arbeits­anweisungen ausgeführt.
Zuweisungen
Schraube S1 = Schraube mit Gewinde x / Länge y
Bedingungen
End- oder Abbruch­bedingung für eine Anweisung oder eine Wiederholung.
Wiederholungen (Schleifen)
Sich wiederholende Anweisungen
Kommentare
Kommentierung der Anweisungen

Übung:

Schreiben sie einen Bauanleitung für einen Tisch, nach dem obigen Vorbild.

(Beispiel Tisch)

Anhang: Tastaturkommandos

Computerprogramm

Ein Programm ist ähnlich strukturiert:

Definitionen

Extern
Variablen, Objekte und Funktionen die in gesonderten Dateien/Bibliotheken stehen.
Intern
Selbstdefinierte Variablen, Objekte und Funktionen bekannt machen.

Elemente des Programmablaufs

Anweisungen
Konkrete Programmanweisungen
Funktionen/Objekte
Mehrere Anweisungen / Zuweisungen werden zusammengefasst.
Zuweisungen
Variablen einen Wert zuweisen. (Auch eine Anweisung!)
Bedingungen
End- oder Abbruchbedingung für eine Anweisung oder eine Wiederholung.
Schleifen
Sich mehrfach wiederholende Anweisungen
Kommentare
Kommentierung der Anweisungen

Man erkennt sofort die Ähnlichkeit mit einem Bauanleitung.

Hier haben wir einige Konzepte, die sich nicht so einfach erschließen. Genaueres lesen sie im Kapitel über JavaScript.

Variablen
Variablen speichern veränderliche (variable) Werte.
variable = wert;
Funktion
Funktionen fassen parametrisierte Anweisungen zusammen und können einen Wert zurückgeben.
Rückgabewert = Funktion (Parameter1, Parameter2);
Objekt
Objekte fassen Variablen (als Attribute) und Funktionen (als Methoden) als Eigenschaften zusammen. Diese Eigenschaften können sie an andere Objekte vererben.

Programmieren mit Pseudocode

In der Informatik versteht man unter Pseudocode eine formalisierte Schreibweise von Anweisungen, die theoretisch ein Computer ausführen könnte. D.h. Pseudocode verzichtet auf alles sprachliche Beiwerk und konzentriert sich auf das wesentliche.

Übung:

Schreiben sie ein Pseudoprogramm (und/oder Anweisungen für einen Menschen), welches wiederholt (10x) die Uhrzeit ausgibt.

(Pseudocode Mensch
, Pseudocode Computer)

Anhang: Tastaturkommandos

In dem Beispiel für ein Pseudo-Programm sind alle wesentlichen Konzepte der Programmierung enthalten:

Definitionen

Extern
Benutze Ausgabe, Datum
Intern
Definiere Jetzt vom Typ Datum/Uhrzeit, Definiere Wdh vom Typ Zahl;

Programmablaufs

Anweisungen
Ausgabe.Ausgeben (Jetzt);
Funktionen/Objekte
Datum.Jetzt;
Ausgabe.Ausgeben ();
Zuweisungen
Speicher 0 in Wdh; // Wdh=0;
Jetzt = Datum.Zeit;
Erhöhe Wert von Wdh um 1;
Bedingungen
Wdh == 10
Schleifen
wiederhole … bis ( … );
Kommentare
// Ablauf

JavaScript

Das Programm als JavaScript (Beispiel Zähler):

<!DOCTYPE html>
<html>
<head>
  <title>Zaehler</title>
</head>
<body>
  <script type="text/javascript">
    // Datumsbibliothek ist implizit enthalten
    var Datum = new Date(); // Sonderfall Objekt
    var jetzt;
    var i = 10;

    do {
      jetzt = Datum.toLocaleString(Datum.getTime());
      document.write('\n<p>' + jetzt + '<\/p>');
      i--; // enspricht i = i - 1
    } while (i>0);
  </script>
</body>
</html>

Dies ist natürlich ein sehr einfaches Programm, das uns nur die grundsätzliche Funktionsweise näher bringen soll. Denken sie daran, dass sie an dieser Stelle nicht Programmieren lernen sollen, sondern nur die Konzepte verstehen, um JavaScript-Funktionen verwenden zu können!

Definitionen

Extern
JavaScript-Funktionen werden über <script src=""> im Header eingebunden.
Aber: Viele Objekte sind implizit enthalten (Date, document)
Intern
var jetzt;
Variable „jetzt“ definieren.
var i = 10;
Variable „i“ definieren und mit „10“ vorbelegen.
var Datum = new Date();
Datum ist eigentlich ein Objekt der Klasse Date (s.u.). Klassen stellen wieder Funktionen (Methoden) zur Verfügung.

Programmablauf

Anweisungen
document.write('\n<p>' + jetzt + '<\/p>');
Zeichenkette ('<p>3.6.2014 20:21:01</p>') in HTML-Dokument ausgeben.
Funktionen/Obj.
document.write();
Zeichenkette in Dokument ausgeben.
Datum.toLocaleString();
Zeit/Datum in lesbare Zeichenkette (wie 3.6.2014 20:21:01) wandeln.
Datum.getTime();
Aktuelle Zeit/Datum holen.
Zuweisungen
jetzt = …;
In Variable „jetzt“ lesbare Zeit/Datum Zeichenkette speichern.
i--; //enspricht i = i - 1
Inhalt der Variablen „i“ um „1“ verringern.
Bedingungen
i > 0
Vergleiche linke und rechte Seite mit Vergleichsoperator (>).
Schleifen
do { … } while (i > 0);
Tue das folgende ( … ) solange die Bedingung „i > 0“ wahr ist.
Kommentare
// Datumsbibliothek ist implizit enthalten

Zusammenfassung

⇦ Dynamik / Dynamisches HTML ⇨
Nach oben