Nwlapcug.com


Tutorial su JavaScript database

Tutorial su JavaScript database


Un programma JavaScript viene eseguito all'interno del browser Web. Per motivi di sicurezza, JavaScript non può scrivere in un computer locale, diverso dall'utilizzo di "cookie" temporanei, né può scrivere a un server Web.

Per creare funzionalità di database relazionale, un database relazionale deve essere installato sul server Web e funzionalità di gestione del database deve essere scritto in un linguaggio lato server come PHP. JavaScript può effettuare chiamate per la funzionalità di database utilizzando AJAX.

Tuttavia, se non relazionali "run-time solo" Insert, Query, Update e Delete funzionalità sono necessari su una "tabella statica", un puro JavaScript "database" può essere creato utilizzando la libreria "Taffydb" open-source.

Istruzioni

Creazione di una pagina Seleziona risultati

1

Utilizzare il proprio browser alla pagina di download Taffydb su GitHub. (Vedi risorse). Fare clic sul pulsante "Scarica Source", selezionare "Zip" e salvarlo sul desktop di computer di "typicaljoe-taffydb-d3a8525.zip".

2

Estrarre taffy.js dal file ZIP e salvarlo sul desktop.

3

Creare un documento di testo vuoto sul desktop e rinominarlo come "statictable.js". Aprire statictable.js nel blocco note e copiare e incollare il seguente codice JavaScript.

var mytaffy = new TAFFY ([

{1: id, nome: Punteggio ottenuto "Company A",: "80", Descrizione: "05/02/10"},

{2: id, nome: "Società B", il Punteggio: "90", Descrizione: "06/02/10"}

]);

4

Salvare statictable.js. Creare un documento di testo vuoto sul desktop e rinominarlo come "myhtml.html". Aprire myhtml.html nel blocco note e copiare e incollare il codice seguente.

< html >

< head >

&lt;script type="text/javascript">&lt;/script>

&lt;script>

rif var = 2;

Function refreshDisplay() () {

try {

uscita = 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 {

Alert(Err.Description);

}

}

< / script >

< / head >

< onLoad="refreshDisplay() del corpo" >

i risultati del Database < h3 >: < / h3 >

riga-id, nome, punteggio, descrizione

< div id = "visualizzare" >< / div >

< / body >

< / html >

5

Salvare myhtml.html. Fare doppio clic sull'icona desktop myhtml.html, per la visualizzazione all'interno di un browser Web. Si noti che l'evento "onLoad del corpo" chiama la funzione di "refreshDisplay()" quando la pagina viene caricata, e i risultati vengono visualizzati nell'elemento DOM con id "display."

6

Premere "Alt" + "TAB" per selezionare il browser. Premere "F5" per aggiornare la pagina HTML. Il browser dovrebbe visualizzare le due righe "Company A" e "società b".

Aggiunta di una riga

7

Premere "Alt" + "TAB" per selezionare il blocco note. Copiare e incollare il seguente codice sopra il tag di fine "< / script >" nel blocco note per inserire una funzione per aggiungere un record.

Function AddRecord () {

linea di var = prompt (

"Si prega di inserire nome, Punteggio e data, separati da virgole:");

var toks=line.split(",");

Se (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

Copiare e incollare il seguente codice sopra il tag di fine "< / body >" nel blocco note per creare un pulsante "Aggiungi Record".

< input type = "button" id = "btnCreate" onclick="addRecord()" valore = "Aggiungi Record" >< / input >

9

Premere "Alt" + "TAB" per selezionare il browser. Premere "F5" per aggiornare la pagina HTML. Fare clic sul pulsante "Aggiungi Record" e immettere "società C, 85, 07/02/10" al prompt, quindi fare clic su "OK". Il browser dovrebbe ora visualizzare il nuovo record.

L'aggiornamento di una riga

10

Premere "Alt" + "TAB" per selezionare il blocco note. Copiare e incollare il seguente codice sopra il tag di fine "< / script >" nel blocco note per aggiungere la funzione JavaScript per aggiornare un record.

Function updateRecord () {

var lref = parseInt (prompt ("Inserisci il numero di id di riga"));

lline var = parseInt (prompt ("Inserisci il nuovo punteggio"));

mytaffy.Update({

score:lline

},{id:lref});

refreshDisplay();

}

11

Copiare e incollare il seguente codice sopra il tag di fine "< / body >" nel blocco note per aggiungere un pulsante "Aggiorna Record".

< tipo input = "pulsante" id = "btnUpdate" onclick="updateRecord()" value = "Aggiorna Record" >< / input >

12

Premere "Alt" + "TAB" per selezionare il browser. Premere "F5" per aggiornare la pagina HTML. Fare clic sul pulsante "Aggiorna Record", immettere "1" per la "Company A" id di riga e quindi fare clic su "OK". Immettere "95", quindi fare clic su "OK". Il browser dovrebbe ora visualizzare il punteggio aggiornato per "Società A."

Eliminazione di una riga

13

Premere "Alt" + "TAB" per selezionare il blocco note. Copiare e incollare il seguente codice sopra il tag di fine "< / script >" nel blocco note per inserire una funzione per eliminare un record.

Function DeleteRecord () {

var lref = parseInt (prompt ("Inserisci il numero di id di riga"));

mytaffy.Remove({ID:Lref});

refreshDisplay();

}

14

Copiare e incollare il seguente codice sopra il tag di fine "< / body >" nel blocco note per creare un pulsante "Elimina Record".

< input type = "button" id = "btnDelete" onclick="deleteRecord()" valore = "Elimina Record" >< / input >

15

Premere "Alt" + "TAB" per selezionare il browser. Premere "F5" per aggiornare la pagina HTML. Fare clic sul pulsante "Elimina Record", immettere "1" per la "Company A" id di riga e quindi fare clic su "OK". Il browser dovrebbe ora visualizzare solo una riga "azienda b".

Consigli & Avvertenze

  • Nell'esempio di cui sopra non salva le modifiche in un file. Ciò, ad esempio, inviando un DHTML "post" a un linguaggio di server come PHP, affinché lo salva statictable.js con i nuovi dati.