Tutorial über JavaScript-Datenbanken
Ein JavaScript-Programm läuft innerhalb des Web-Browsers. Aus Sicherheitsgründen JavaScript kann nicht auf einem lokalen Computer nicht mithilfe der temporäre "Cookies", schreiben, noch kann es zu einem Webserver schreiben.
Um Funktionen für relationale Datenbanken zu erstellen, eine relationale Datenbank auf dem Webserver installiert werden muss, und Datenbank-Funktionalität in einer serverseitigen Sprache wie PHP geschrieben werden muss. JavaScript kann die Datenbankfunktionalität mit AJAX aufrufen.
Jedoch, wenn nicht-relationale "Run-Time nur" einfügen, Abfrage aktualisieren und Löschfunktion sind verpflichtet, für eine "statische Tabelle" reine JavaScript "Datenbank" kann mit der Open-Source-Bibliothek "Taffydb" erstellt werden.
Anweisungen
Erstellen einer Seite Ergebnisse auswählen
1 Navigieren Sie in Ihrem Browser, um die Taffydb-Download-Seite auf GitHub. (Siehe Ressourcen). Klicken Sie auf "Download Source", wählen Sie "Zip" und speichern Sie "Typicaljoe-Taffydb-d3a8525.zip" auf Ihrem Desktop zu.
2 Extrahieren Sie taffy.js aus der ZIP-Datei und speichern Sie es auf Ihrem Desktop.
3 Erstellen Sie ein leeres Textdokument auf Ihrem Desktop, und benennen Sie sie als "statictable.js". Statictable.js im Editor zu öffnen, kopieren und fügen Sie den folgenden JavaScript-Code.
Var Mytaffy = neue TAFFY ([
{Id: 1, Name: "Firma A", Ergebnis: "80", Beschreibung: "05.02.10"},
{Id: 2, Name: "Firma B", Ergebnis: "90", Beschreibung: "06.02.10"}
]);
4 Speichern Sie statictable.js. Erstellen Sie ein leeres Textdokument auf Ihrem Desktop, und benennen Sie sie als "myhtml.html". Myhtml.html im Editor zu öffnen, kopieren und fügen Sie den folgenden Code.
< html >
< Head >
<script type="text/javascript"></script>
<script>
Var-Ref = 2;
Funktion refreshDisplay() {}
versuchen Sie {}
Ausgabe = document.getElementById("display");
output.innerHTML= "";
mytaffy.orderBy([{"score":"desc"}]);
Var Ltotal = 0;
{mytaffy.forEach(function(n,m)}
ltotal++;
output.innerHTML = output.innerHTML + n.id + ", " + n.name + ", " + n.score + ", " + n.description + "";
});
output.innerHTML = output.innerHTML + "Total Records:" + Ltotal;
} catch(err) {}
Alert(Err.Description);
}
}
< / script >
< / head >
< onLoad="refreshDisplay() Körper" >
Datenbankergebnisse < h3 >: < / h3 >
Zeilen-Id, Name, Partitur Beschreibung
< Div Id = "anzeigen" >< / Div >
< / body >
< / html >
5 Speichern Sie myhtml.html. Doppelklicken Sie auf das myhtml.html desktop-Symbol, um es in einem Webbrowser anzuzeigen. Beachten Sie, dass das Ereignis "Body OnLoad" Ruft die "refreshDisplay()"-Funktion, wenn die Seite geladen wird und die Ergebnisse werden angezeigt, in das DOM-Element mit der Id "Anzeige."
6 Drücken Sie "Alt" + "TAB" Browser ausgewählt werden. Drücken Sie "F5", um die HTML-Seite zu aktualisieren. Der Browser sollte die beiden Zeilen "Firma A" und "Firma b" anzeigen
Hinzufügen einer Zeile
7 Drücken Sie "Alt" + "TAB" Notepad auswählen. Kopieren Sie und fügen Sie den folgenden Code oberhalb der "< / script >" End-Tag im Editor zum Einfügen einer Funktion um einen Datensatz hinzuzufügen.
Funktion addRecord() {}
Var-Linie = Prompt ()
"Bitte geben Sie Name, Score und Datum, durch Kommas getrennt:");
Var toks=line.split(",");
Wenn (toks.length > = 3) {}
var lname=toks[0];
var lscore=parseInt(toks[1]);
var ldate=parseInt(toks[2]);
Ref = Ref + 1;
mytaffy.insert({ id:ref, name:lname, score:lscore, description:ldate } );
}
refreshDisplay();
}
8 Kopieren Sie und fügen Sie den folgenden Code oberhalb der "< / body >" End-Tag im Editor erstellen Sie eine Schaltfläche "Eintrag hinzufügen".
< Eingang Typ = "Knopf" Id = "BtnCreate" onclick="addRecord()" Wert = "Eintrag hinzufügen" >< / Eingang >
9 Drücken Sie "Alt" + "TAB" Browser ausgewählt werden. Drücken Sie "F5", um die HTML-Seite zu aktualisieren. Klicken Sie auf "Eintrag hinzufügen" und geben Sie "Company C, 85, 07.02.10" an der Eingabeaufforderung klicken Sie auf "OK". Der Browser sollte nun den neuen Datensatz anzeigen.
Aktualisieren einer Zeile
10 Drücken Sie "Alt" + "TAB" Notepad auswählen. Kopieren Sie und fügen Sie den folgenden Code oberhalb der End-Tag "< / script >" im Editor, fügen Sie die JavaScript-Funktion, um einen Datensatz zu aktualisieren.
Funktion updateRecord() {}
Var Lref = ParseInt (Prompt ("Bitte geben Sie die Zeile-Id-Nummer"));
Var Lline = ParseInt (Prompt ("Bitte geben Sie die neue Partitur"));
mytaffy.Update({
score:lline
},{id:lref});
refreshDisplay();
}
11 Kopieren Sie und fügen Sie den folgenden Code oberhalb der "< / body >" End-Tag im Editor eine Schaltfläche "Datensatz aktualisieren" hinzufügen.
< Eingang Typ = "Knopf" Id = "BtnUpdate" onclick="updateRecord()" Wert = "Datensatz aktualisieren" >< / Eingang >
12 Drücken Sie "Alt" + "TAB" Browser ausgewählt werden. Drücken Sie "F5", um die HTML-Seite zu aktualisieren. Klicken Sie auf "Update Record", und geben Sie "1" für "Firma A"-Zeilen-Id, und klicken Sie auf "OK". Dann geben Sie "95", und klicken Sie auf "OK". Der Browser sollte jetzt die aktualisierte Partitur "Unternehmen A." angezeigt.
Löschen einer Zeile
13 Drücken Sie "Alt" + "TAB" Notepad auswählen. Kopieren Sie und fügen Sie den folgenden Code oberhalb der "< / script >" End-Tag in Notepad eine Funktion zum Löschen eines Datensatzes eingefügt.
Funktion deleteRecord() {}
Var Lref = ParseInt (Prompt ("Bitte geben Sie die Zeile-Id-Nummer"));
mytaffy.Remove({ID:lref});
refreshDisplay();
}
14 Kopieren Sie und fügen Sie den folgenden Code oberhalb der "< / body >" End-Tag im Editor erstellen Sie eine Schaltfläche "Datensatz löschen".
< Eingang Typ = "Knopf" Id = "BtnDelete" onclick="deleteRecord()" Wert = "Datensatz löschen" >< / Eingang >
15 Drücken Sie "Alt" + "TAB" Browser ausgewählt werden. Drücken Sie "F5", um die HTML-Seite zu aktualisieren. Klicken Sie auf die Schaltfläche "Datensatz löschen" und geben Sie "1" für "Firma A"-Zeilen-Id, und klicken Sie auf "OK". Der Browser sollte jetzt nur eine Zeile "Firma b" angezeigt.
Tipps & Warnungen
- Im obige Beispiel speichern nicht Änderungen in einer Datei. Dies kann, zum Beispiel erreicht werden durch das Senden einer DHTML "post" auf eine Serversprache wie PHP, so dass es zu statictable.js mit den neuen Daten speichert.