Webkit: database-objekt - Logik hinter der Syntax?

[ingobar]

Hallo zusammen,

ich bastele gerade ein wenig mit dem Database Objekt vom Webkit/Safari. Allerdings verstehe ich die Syntax irgendwie noch nicht. Da scheint mir noch irgendein grundlegendes Verständnis zu fehlen. Vielleicht könnt ihr mir durch einen passenden Link oder einer Erklärung helfen.

Der Code sieht wie folgt aus:

  
//Datenbank erzeugen  
//openDatabase(Datenbankname,DB-Version, Beschreibung, Größe in Bytes)  
db = openDatabase("MyDB3", "1.0", "HTML5 DB example", 200000);  
  
//Tabelle erzeugen.  
//Jeder Zugriff auf die DB läuft über eine atome Transaktion  
db.transaction(function(tx) {  
     tx.executeSql("CREATE TABLE Klasse (id REAL UNIQUE, name TEXT, vorname TEXT, klasse TEXT)");  
 });  

Jetzt zu meinem Problem:

Die Methode transaction des DB-Objekts bekommt eine Funktion als Wert?

tx ist was? Die Transaktion selbst?

Warum geht dann db.transaction(executeSql()); nicht?

Ich kriege irgendwie nicht Logik nicht in den Kopf.

Vielen Dank für eure Tipps.

[molily]

Hallo,

Die Methode transaction des DB-Objekts bekommt eine Funktion als Wert?

Ja, als Callback für die Transaktion.

tx ist was? Die Transaktion selbst?

Ja, ein Objekt, das die Transaktion repräsentiert.

Warum geht dann db.transaction(executeSql()); nicht?

Weil dieser Code etwas anderes tun würde. Es wäre kein Zugriff auf das Transaktionsobjekt möglich. executeSql würde ausgeführt und dessen Rückgabewert an db.transaction übergeben. Das wäre Unsinn. Man will ja eine Transaktion erzeugen und mit dieser Queries ausführen. Denkbar wäre höchstens:

var tx = db.transaction();
tx.executeSql(...);

Aber wie gesagt arbeitet man stattdessen asynchron mit Callbacks, damit die Zeit zwischen diesen Befehlen anderweitig genutzt werden kann. executeSql übergibt man übrigens auch eine Callback-Funktion.

Ich kriege irgendwie nicht Logik nicht in den Kopf.

Die Logik ist dieselbe wie überall sonst in JavaScript, wo asynchron mit Callback- oder Event-Handler-Funktionen gearbeitet wird.

Mathias

[ingobar]

Was sind denn Callback-Funktionen?

[Daniel Thoma]

Hallo ingobar,

Was sind denn Callback-Funktionen?

Callback-Funktionen sind eine Möglichkeit, Teile des Verhaltens einer Funktion als Parameter mit zu geben.
Beispiel:

function iterate(array, func) {
  for(var i = 0; i < array.length; ++i) {
    func(array[i]);
  }
}

Nun kann ich so alle Elemente eines Arrays ausgeben:
iterate(meinArray, function(element) {alert(element});

Genau das passiert auch bei der DB-API.
Die Funktion "transaction" erzeugt eine Transaktion, ruft die übergebene Funktion auf und führt ein commit aus.
Diese Art der Programmierung erlaubt eine viel flexiblere Stukturierung des Kontrollabflusses.
Man kann so eine Funktion als eine Art Vorlage für einen Algorithmus betrachtent, in den man einzelne Teile erst noch einsetzt.

Grüße

Daniel

[ingobar]

Hallo ingobar,

Was sind denn Callback-Funktionen?
Callback-Funktionen sind eine Möglichkeit, Teile des Verhaltens einer Funktion als Parameter mit zu geben.
Beispiel:

function iterate(array, func) {
  for(var i = 0; i < array.length; ++i) {
    func(array[i]);
  }
}

Nun kann ich so alle Elemente eines Arrays ausgeben:
iterate(meinArray, function(element) {alert(element});

Das Beispiel ist total einleuchtend. Wo es jetzt bei nur hängt, ist bei dem Beispiel

  
db.transaction(function(tx) {  
     tx.executeSql("CREATE TABLE Klasse (id REAL UNIQUE, name TEXT, vorname TEXT, klasse TEXT)");  
 });  

dass ich nicht verstehe, dass tx ein transaction-Objekt ist und damit tx.executeSql geht. E gibt doch nirgends eine Zuweisung der Art tx=transaction?

[Struppi]

Hallo ingobar,

Bitte kein ToFu, Danke!

Beispiel:

function iterate(array, func) {
  for(var i = 0; i < array.length; ++i) {
    func(array[i]);
  }
}
Das Beispiel ist total einleuchtend.

Anscheinend nicht wirklich.

Wo es jetzt bei nur hängt, ist bei dem Beispiel

db.transaction(function(tx) {
     tx.executeSql("CREATE TABLE Klasse (id REAL UNIQUE, name TEXT, vorname TEXT, klasse TEXT)");
});

>   
> dass ich nicht verstehe, dass tx ein transaction-Objekt ist und damit tx.executeSql geht. E gibt doch nirgends eine Zuweisung der Art tx=transaction?  
  
Natürlich, du siehst doch oben im Beispiel wie die Callbackfunktion mit dem Parameter array[i] aufgerufen wird, genau das passiert hier auch, die callbackfunktion wird (browserintern) mit dem Objekt tx aufgerufen.  
  
Das Gleiche kannst du beobachten, wenn du eine Eventfunktion verwendest.  
  
`[object].onclick = function(e) { alert(e);};`{:.language-javascript}  
  
Das e wird intern der Funktion übergeben übergeben.  
  
Struppi.

[molily]

Hallo,

db.transaction(function(tx) {
     tx.executeSql("CREATE TABLE Klasse (id REAL UNIQUE, name TEXT, vorname TEXT, klasse TEXT)");
});

>   
> dass ich nicht verstehe, dass tx ein transaction-Objekt ist und damit tx.executeSql geht. E gibt doch nirgends eine Zuweisung der Art tx=transaction?  
  
Dort wird eine sogenannter Funktionsausdruck notiert. Der hat keinen Namen, die Funktion wird also nirgendwo gespeichert, sondern wird lediglich als Parameter an executeSql übergeben. Diese Funktion nimmt einen Parameter entgegen, der heißt tx. Damit sie funktioniert, muss ihr also das Transaktionsobjekt als Parameter übergeben werden. Und genau das macht die transaction-Methode, sie ruft die als Parameter angegebene Callback-Funktion auf und übergibt ihr das Transaktionsobjekt. So arbeiten Callbacks, genau das wollte Daniels Beispiel »iterate(meinArray, function(element) {alert(element});| veranschaulichen.  
  
Mathias

-- 
[SELFHTML aktuell Weblog](http://aktuell.de.selfhtml.org/weblog/)

[ingobar]

Denkbar wäre höchstens:

var tx = db.transaction();
tx.executeSql(...);

Genau das funktioniert aber nicht. Das ist ja mein Problem. Dennoch danke.

[molily]

Hallo,

Denkbar wäre höchstens:

var tx = db.transaction();
tx.executeSql(...);

Genau das funktioniert aber nicht. Das ist ja mein Problem.

Natürlich nicht. Weil die API nicht synchron aufgebaut ist, sondern mit Callbacks arbeitet. Deshalb schrieb ich »denkbar«, nur um die beiden Modelle gegeneinander abzugrenzen. Wenn du dir z.B. Event-Handling ansiehst, wird auch asynchron gearbeitet:

element.onevent = handlerfunktion;
bzw.
element.addEventListener("event", handlerfunktion, captureFlag)

function handlerfunktion (eventObjekt) {
   // ...
}

Alle Vorgänge in JavaScript, die irgendwelche »Seiteneffekte« haben, laufen üblicherweise asynchron mit Event-Handlern bzw. Callbacks:

var i = new Image()
i.onload = loadHandler;
i.src = "/bild.png";

oder

var r = new XMLHttpRequest();
r.open("GET", "datei.txt", true);
r.onreadystatechange = xhrHandler;
r.send(null);

(wobei XMLHttpRequest auch synchron ginge)

oder

window.setTimeout(callbackFunction, 1000);
window.setInterval(callbackFunction, 1000);

Mittlerweile verwenden JavaScript-Helferscripte und -Bibliotheken an tausenden Stellen Callbacks und man notiert ständige anonyme Funktionen, die man gewissen Methoden als Callbacks übergibt. Beispielsweise hat JavaScript 1.7 einige funktionale Erweiterungen:

var array = [1, 2, 3];
array.forEach(function (element) {
   alert(element);
});

Mathias

[Tim Tepaße]

Hallo,

ich bastele gerade ein wenig mit dem Database Objekt vom Webkit/Safari. Allerdings verstehe ich die Syntax irgendwie noch nicht. Da scheint mir noch irgendein grundlegendes Verständnis zu fehlen. Vielleicht könnt ihr mir durch einen passenden Link oder einer Erklärung helfen.

Das stammt aus dem SQL Database-Teil von HTML 5. Die Spezifikation ist noch etwas grob und unausgeführt, aber vielleicht hilft es Dir trotzdem beim Verständnis.

Tim