Archive for the ‘Javascript’ Category
Yahoo! Query Language (YQL) erklärt
Vorwarnung: Dieser Post ist relativ lang, aber mit vielen Beispielen gefüllt und sehr interessant wie ich finde. Wer durchhält, wird belohnt!
Wer von euch schonmal auf Web-APIs zugegriffen hat weiß dass die APIs alle unterschiedlich sind, ein einheitlicher Zugriff ist nicht möglich. Des weiteren möchte man eventuell Daten von Webseiten abgreifen, z.B. direkt aus einer Tabelle Wetterdaten oder Flugdaten auslesen. Dazu muss man den HTML-Code laden, parsen und die Informationen extrahieren.
Für dies und vieles mehr kann man die Yahoo Query Language (YQL) einsetzen. YQL ist eine SQL-ähnliche Sprache um den Yahoo-Servern eine Aufgabe zu geben, die Mengen von Daten betreffen, die die Yahoo-Server sammeln und das Ergebnis berechnen, welches man dann in einer einheitlichen XML-Antwort oder als JSON erhält.
Wer sich das nicht vorstellen kann, hier ein paar Einführungsbeispiele:
Die mail.de GmbH sucht Javascript-Entwickler
Wir suchen aktuell in der Firma eine(n) Javascript-Entwickler(in), und ich glaube hier tummeln sich viele Leute aus der passenden Fachrichtung. Falls du interessiert bist oder jemanden kennst, der Interesse hat, melde dich bitte bei der angegebenen Kontaktadresse.
Der ideale Kanditat ist ein(e) fähige(r) Javascriptler(in), der/die sich mit Mootools auskennt (oder sich schnell einarbeiten kann), mehrjährige Erfahrungen im Webentwicklungsbereich hat und mit uns dieses Projekt starten möchte.
Weitere Informationen befinden sich auf unserer Webseite:
Linkpool Nummer 6
Why you can’t work at work:
Die Power und Geheimnisse von Javascript:
Start-Stop-Daemon, einfach PHP-Dienste unter Linux einrichten:
Javascript Exceptions in Userbrowsern mitloggen:
Mail Transport Resource für Zend Framework:
Der Beginn einer Serie über Websockets:
HTML 5 und Javascript 5: Clientseitige Datenbanken
Nachdem sich die Web Hypertext Application Technology Working Group (WHATWG) 2004 gegründet hat, die aus einigen bedeutenden Internet-Riesen besteht (u.a. Apple, Mozilla, Opera), kommt wieder Fahrt in neue HTML- und Javascript-Standards. Die Gruppe hat viele Proposals erstellt, von denen jetzt einige vom W3C übernommen werden. Stichworte sind da HTML 5, ECMAScript 5, Web Workers, Web Storage, Web Sockets und einiges mehr.
Zu den Web Workern hatte ich ja bereits etwas geschrieben.
Web Sockets wird die Pushing-Technik werden, mit der Server bei Änderungen Nachrichten an den Browser schicken können, dann erübrigt sich das derzeitige Pullen und Nachfragen via AJAX, ob es Neuigkeiten gibt. Das entlastet die Server und spart Traffic, und Nachrichten kommen genau dann im Browser an wenn sie auf dem Server passieren, nicht erst beim nächsten Pull.
Heute soll es um den Web Storage gehen, die clientseitige Datenbank im Browser. In der Vergangenheit konnte man Daten nur auf der aktuellen Seite in Javascript-Variablen vorhalten, sobald aber der nächste Full-Page-Reload kommt sind die Daten futsch. Die zweite Möglichkeit waren Cookies, in denen man Daten speichern kann. Da aber Cookies bei jedem Request mitgesendet werden, ist das kein guter Speicherort für größere Datenmengen, Cookies sollte man höchstens für eine SessionID nutzen.
HTML 5 bietet uns die Möglichkeit, mittels des localStorage einfache Daten im Client zu speichern. Hier ein kleines Beispiel:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function store() {
var key = document.getElementById('key').value;
var data = document.getElementById('data').value;
localStorage.setItem(key, data);
}
function read() {
var key = document.getElementById('key').value;
document.getElementById('data').value = localStorage.getItem(key);
}
</script>
</head>
<body>
<textarea id="data"></textarea>
<p>
<label>key: <input id="key"></label>
<input type="button" value="Read" onclick="read()">
<input type="button" value="Store" onclick="store()">
</p>
</body>
</html>
Dieser Code funktioniert bereits im IE 8, Firefox 3.5, Safari 4. Auch wenn man zwischendurch wegsurft und dann wiederkommt sind die Daten noch auslesbar. Wenn man allerdings 2 Fenster öffnet und in beiden Fenstern den selben Key speichert, überschreibt man den jeweils anderen Wert. Um das zu vermeiden (also beide Fenster zu trennen) gibt es den sessionStorage. Wenn man im obigen Code den localStorage durch den sessionStorage austauscht, kommen sich die beiden Fenster nicht mehr in die Quere, allerdings sind die Daten futsch wenn man den Tab schliesst. Für eine permanente Speicherung, auf die alle Tabs zugreifen können, nutzt man also den localStorage.
Bei diesem Feature handelt es sich allerdings “nur” um einen einfachen Key-Value-Store, wir können keine komplexen Abfragen oder ähnliches erstellen.
In Google Gears wurde es bereits vorgemacht: Idealerweise brauchen wir eine clientseitige Datenbank, die wir via SQL füllen und abfragen können, um Daten auf den Client auszulagern und so den Server zu entlasten und Daten nicht bei jedem neuen Besuch neu laden zu müssen. Stattdessen werden Daten, die einmal den Client erreicht haben, in die Datenbank gelegt, die dann auch sehr schnell ausgelesen, sortiert und gruppiert werden können, also eine vollwertige Datenbank im Browser.
Mit ECMA-Script 5 (im Volksmund Javascript 5) wird das möglich sein. Der folgende Code funkioniert aktuell nur in WebKit/Safari, für Firefox und Chrome gibt es aber bereits funktionierende Beta-Implementierungen:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
if (!window.openDatabase) {
alert( "Browser does not support database storage.");
} else {
db = openDatabase('testDb', '1.0', 'testDb', 65536);
}
function create() {
db.transaction(
function (tx) {
tx.executeSql('CREATE TABLE todo (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, description TEXT NOT NULL DEFAULT "", todo_order INTEGER NOT NULL DEFAULT 0, done INTEGER NOT NULL DEFAULT 0 );',
[], function (tx, result1) {
alert("successfully created database");
}, errorHandler
);
}
);
}
function insert() {
db.transaction(
function(tx) {
tx.executeSql('INSERT into todo (description, todo_order) VALUES ( ? , ? );',
[ document.getElementById('firstKey').value , 3 ],
function (tx, resultSet) {
if (!resultSet.rowsAffected) {
// Previous insert failed. Bail.
alert('No rows affected!');
return false;
}
alert('insert ID was '+resultSet.insertId);
}, errorHandler
);
}
);
}
function selectnow() {
db.transaction(
function(tx) {
tx.executeSql('SELECT description FROM todo WHERE done=0', [], function(tx, results) {
// do some more stuff
console.log("Results returned: "+results.rows.length);
var resultString = '';
for (var i=0; i<results.rows.length; i++) {
var row = results.rows.item(i);
resultString += row['description'] + '<br/>';
}
document.getElementById('latestUpdated').innerHTML = resultString;
alert("My first database query finished executing!");
}, errorHandler);
}
);
}
function drop() {
db.transaction(
function(tx) {
tx.executeSql('DROP Table todo', [], function(tx, result1) {
alert("successfully deleted database!");
}, errorHandler);
}
);
}
function errorHandler(transaction, error)
{
// error.message is a human-readable string.
// error.code is a numeric error code
alert('Oops. Error was '+error.message+' (Code '+error.code+')');
}
</script>
</head>
<body>
<h3>Create Table</h3>
<input type="button" name="create" value="Create" onclick="create()"/>
<h3>Insert Values</h3>
<input type="text" id="firstKey" value="firstValue"/>
<input type="button" name="insert" value="Insert" onclick="insert()"/>
<h3>Select Values</h3>
<input type="button" name="select" value="Select now" onclick="selectnow()"/>
<br/>
<span id="latestUpdated"></span>
<h3>Drop Table</h3>
<input type="button" name="drop" value="Drop" onclick="drop()"/>
</body>
</html>
Im Safari sieht das dann so aus:
Eine sehr gute Quelle zu diesem Thema ist diese Seite bei Apple über die Javascript Database.
Weitere Interessante Features von HTML 5 und ECMA-Script 5: Strict Mode, getter und setter bei Objekten, Objekte “einfrieren”, neue Html-Tags, neue Drag&Drop Funktionen, postMessage() und vieles mehr.
Einiges davon funktioniert bereits im Firefox 3.5, Chrome, Safari und auch im IE8. Beispielsweise:
<!DOCTYPE html> <html> <head></head> <body> <video src="testvideo.mp4" controls autobuffer autoplay></video> </body> </html>
Auch YouTube hat bereits eine HTML 5 Beta-Seite gestartet
Ich werde in den nächsten Wochen einige der Dinge vorstellen, die wir erwarten können und uns das Leben etwas einfacher machen werden.
