Erste Beispiele

... [ Seminar Programmiersprachen und Sprachsysteme ] ... [ Google's Dart ] ... [ Inhaltsverzeichnis >> ] ...

Übersicht: Erste Beispiele


Beispiel Quellcode (1) - externes einbinden

Hier haben wir ein einfach zu lesendes Beispiel:

hi.dart:

1 import 'dart:html';
2
3 main() {
4   document.query('#status').text = 'Hi, Dart';
5 }

hi.html:

1 <!DOCTYPE html>
2   <html><body>
3 	<h2 id="status"></h2>
4 	<script type="application/dart" src="hi.dart"></script>
5 	<script type="text/javascript" src="dart.js"></script>
6   </body></html>

Zuerst zur der Dart-Datei. In Dart ist es möglich sein Quellcode logisch aufzuteilen. Um eine Dart-Library einzubinden verwendet man den "import" keyword wie in Zeile 1 dargestellt. Hier wird also die HTML-Library eingebunden, damit hat man zugriff auf Klassen und Funktionen die für die DOM Manipulation sind. In Zeile 3 definieren wird eine "main"-funktion. Dart Quellcode braucht nämlich einen Eintrittspunkt und das ist dann die "main"-funktion, wie schon in vielen anderen Sprachen auch bekannt ist (wie z.B. C/C++). In unserer Main-funktion greifen wir in Zeile 4 auf das Dokument zu und mit der "query"-funktion können wir einfach die DOM manipulieren. So bekommen alle HTML-Tags mit der id="status" den Text "Hi, Dart". Diese Funktion würde von der html-library importiert.

Betrachten wir jetzt die HTML-Datei. In Zeile 4 wird eine Externe Dart-Datei eingebunden. Also sehr ähnlich wie in JavaScript. Für Dart haben wir einen eigenen MIME-Type "application/dart". Damit wird gesagt, dass die Datei, die hier eigebunden wird, Dart Quellcode ist. Dart Quellcode wird immer erst dann ausgeführt, wenn der ganze DOM Kontext geladen ist. Wenn das passiert wird die "main"-funktion gestartet.
Sollte der Browser keine Dart VM besitzen, dann spielt die Zeile 5 eine Rolle. Diese Zeile bindet normalen JavaScript-code, der zuerst überprüft ob die Dart VM auf den Browser vorhanden ist Wenn der Browser die Dart VM hat, dann passiert nichts, weil der Dartcode in Zeile 4 normal ausgeführt wird. Ist die Dart VM nicht vorhanden, dann versucht JavaScript "hi.dart.js" einzubinden. Dieser Script fügt also das ".js" hinzu. Damit das funktioniert und diese Datei eingebunden werden kann muss "hi.dart.js" auf den Server vorhanden sein (genau wie "hi.dart"). Die "hi.dart.js"-datei ist also die JavaScript Version des Dartcodes von Zeile 4 die mit den dart2js-Kompiler kompiliert würde. Man muss also selber dafür sorgen das sie vorhanden ist. So kann man sein Dart Programm auf allen Dart und/oder JavaScript Kompatiblen Browsern ausführen.
Dabei sollte man achten, dass es nur einen "application/dart" Script gibt, weil der dart2js einen JavaScript-code macht der davon ausgeht, dass sich nur eine Dart App auf der Seite befindet. Außerdem muss der "dart.js" Script nach dem Dart Script definiert sein (wie im Beispiel).

[ nach oben ]


Beispiel Quellcode (2) - Funktionen, String Interpolation, Funk. Block

1  send (msg, to, from, [rate='First Class'])
2  {
3    return '$from said $msg to $to via $rate';
4  }
5
6  main() => print(send('hello', 'Seth', 'Bob')); // return null

Oder:

1  send (msg, to, from, [rate='First Class'])
2  	=> '$from said $msg to $to via $rate';
3 
4  main() { print(send('hello', 'Seth', 'Bob')); }
Hier sehen wir eine Funktion "send" und die Main-funktion die "send" benutzt.
Die => Syntax definiert ein Funktionsblock für eine Anweisung, wie in der Zeile 6 (Oben) und Zeile 2 (Unten) gezeigt.
Die => Syntax ist also das gleiche wie:
{
  return
}
Der Code Oben und Unten macht also das gleiche. Wenn die Funktion kein Rückgabe-Wert hat wie Oben in Zeile 6 die "print"-funktion, dann wird "null" zurückgegeben.
Die "rate" variable in der send-Funktion ist ein Optionaler Parameter mit einen Default-wert. Man sieht hier auch in Zeile 3 (Oben) die String Interpolation, die es viel einfacher und lesbarer macht, Variablen mit Strings zu kombinieren.

Hier Unten nochmal die JavaScript Version des Codes von Oben:

Die JavaScript Version:

1  function send (msg, to, from, rate)
2  {
3    rate = (typeof rate==="undefined")?"First Class":rate;
4    return from+' said '+msg+' to '+to+' via '+rate;
5  }
6 
7  console.log(send('hello', 'Seth', 'Bob'));
[ nach oben ]


Beispiel Quellcode (3) - Bibliotheken, Klassen, Objekte

 1  import 'dart:math' as Math;
 2
 3  class Point {
 4  	Point(this.x, this.y);
 5  
 6  	distanceTo(other) {
 7  	var dx = x - other.x;
 8  	var dy = y - other.y;
 9  		return Math.sqrt(dx * dx + dy * dy);
10  	}
11  	var x, y;
12  }
13
14 
15  main() {
16  	var p = new Point(2, 3);
17  	var q = new Point(3, 4);
18  	print('distance from p to q = ${p.distanceTo(q)}');
19  }
Hier noch ein Beispiel mit einer Klasse. Zuerst wird oben (Zeile 1) die Library für die Mathe Funktionen importiert. Das "as" keyword mit "Math" dahinter sagt aus, dass wir auf die Library-inhalte über den Namensraum "Math" zugreifen können.
Die Klassen Syntax sollte jeden, der mit Klassenbasiert Programmiersprachen gearbeitet hat, vertraut vorkommen. Es wird eine Klassen "Point" definiert mit einer Methode "distanceTo".
Bei den Konstruktor in Zeile 4 haben wir eine Vereinfachung um die Variablen in den Klassen zu initialisieren. Mit den "this" keyword werden also die Variablen "x" & "y" sofort initialisiert.
[ nach oben ]

... [ Seminar Programmiersprachen und Sprachsysteme ] ... [ Google's Dart ] ... [ Inhaltsverzeichnis >> ] ...