Zelfstudie over JavaScript Databases

Zelfstudie over JavaScript Databases


Een JavaScript-programma wordt uitgevoerd in de webbrowser. Om veiligheidsredenen, JavaScript kan niet schrijven naar een lokale computer, buiten het gebruiken van tijdelijke 'cookies', noch kan het schrijven naar een webserver.

Om te bouwen relationele databasefunctionaliteit, een relationele database moet worden geïnstalleerd op de webserver, en database aangestuurde functionaliteit moet worden geschreven in een server-side taal zoals PHP. JavaScript kan bellen naar de databasefunctionaliteit met behulp van AJAX.

Echter, als niet-relationele "run-time alleen" invoegen, Query, bijwerken en verwijderen functionaliteit zijn vereist op een "statische tabel," een pure JavaScript 'database' kan worden gemaakt met behulp van de open-source "Taffydb" bibliotheek.

Instructies

Selecteer resultatenpagina maken

1

Ga uw browser naar de Taffydb-downloadpagina op GitHub. (Zie bronnen.) Klik op de knop "Downloaden bron", selecteer "Zip" en "typicaljoe-taffydb-d3a8525.zip" op het bureaublad van uw computer opslaan.

2

Pak taffy.js uit het ZIP-bestand en sla het op uw bureaublad.

3

Maak een leeg tekstdocument op uw bureaublad en hernoem het als "statictable.js". Open statictable.js in Kladblok en kopieer en plak de volgende JavaScript-code.

var mytaffy = nieuwe TAFFY ([

{-id: 1, naam: "Bedrijf A" score: "80", beschrijving: "2/5/10"},

{id: 2, naam: "Bedrijf B" score: "90", beschrijving: "2/6/10"}

]);

4

Opslaan statictable.js. Maak een leeg tekstdocument op uw bureaublad en hernoem het als "myhtml.html". Open myhtml.html in Kladblok en kopieer en plak de volgende code.

< html >

< head >

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

&lt;script>

var ref = 2;

functie refreshDisplay() {}

Probeer {}

uitvoer = 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 + "totaal aantal Records:" + ltotal;

} catch(err) {}

alert(err.Description);

}

}

< / script >

< / head >

< body onLoad="refreshDisplay()" >

< h3 > Databaseresultaten: < / h3 >

rij-id, naam, score, beschrijving

< div id = "weergeven" >< / div >

< / body >

< / html >

5

Opslaan myhtml.html. Dubbelklik op het bureaublad icoon van myhtml.html, om het te bekijken in een webbrowser. Merk op dat de gebeurtenis "body onLoad" de "refreshDisplay()"-functie aanroept wanneer de pagina wordt geladen, en de resultaten worden weergegeven in de DOM-element met id "scherm."

6

Druk op "Alt" + "Van het lusje" om de browser te selecteren. Druk op "F5" om de HTML-pagina te vernieuwen. De twee rijen "Bedrijf A" en "Bedrijf B." moet worden weergegeven in de browser

Een rij toe te voegen

7

Druk op "Alt" + "Van het lusje" om te selecteren van Kladblok. Kopieer en plak de volgende code boven de eindcode "< / script >" in Kladblok naar een functie om toe te voegen een record invoegen.

functie addRecord() {}

var lijn = prompt ()

"Voer de naam, de score en datum, gescheiden door komma's:");

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

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

Kopieer en plak de volgende code boven de eindcode "< / body >" in Kladblok om een "Add Record" knop te maken.

< input type = "button" id = "btnCreate" onclick="addRecord()" waarde "Add Record" = >< / input >

9

Druk op "Alt" + "Van het lusje" om de browser te selecteren. Druk op "F5" om de HTML-pagina te vernieuwen. Klik op de knop "Add Record", en voer "bedrijf C, 85, 2/7/10" bij de opdrachtprompt, klik vervolgens op 'OK'. De browser moet nu de nieuwe record weergeven.

Bijwerken van een rij

10

Druk op "Alt" + "Van het lusje" om te selecteren van Kladblok. Kopieer en plak de volgende code boven de eindcode "< / script >" in Kladblok om toe te voegen JavaScript-functie een record bijwerkt.

functie updateRecord() {}

var lref = parseInt (prompt ("Voer het rij-id-nummer"));

var lline = parseInt (prompt ("Voer de nieuwe score"));

mytaffy.update({

score:lline

},{id:lref});

refreshDisplay();

}

11

Kopieer en plak de volgende code boven de eindcode "< / body >" in Kladblok om toe te voegen een "Update Record" knop.

< input type = "button" id = "btnUpdate" onclick="updateRecord()" waarde "Record bijwerken" = >< / input >

12

Druk op "Alt" + "Van het lusje" om de browser te selecteren. Druk op "F5" om de HTML-pagina te vernieuwen. Klik op de "Record bijwerken" knop, en voer "1" voor de "Bedrijf A" rij-id, en klik vervolgens op 'OK'. Voer vervolgens '95' in en klik op 'OK'. De browser moet nu de bijgewerkte score weergeven voor "Bedrijf A."

Als u een rij verwijdert

13

Druk op "Alt" + "Van het lusje" om te selecteren van Kladblok. Kopieer en plak de volgende code boven de eindcode "< / script >" in Kladblok om te voegen een functie om een record te verwijderen.

functie deleteRecord() {}

var lref = parseInt (prompt ("Voer het rij-id-nummer"));

mytaffy.Remove({id:lref});

refreshDisplay();

}

14

Kopieer en plak de volgende code boven de eindcode "< / body >" in Kladblok om te maken een "Record verwijderen" knop.

< input type = "button" id = "btnDelete" onclick="deleteRecord()" waarde "Record verwijderen" = >< / input >

15

Druk op "Alt" + "Van het lusje" om de browser te selecteren. Druk op "F5" om de HTML-pagina te vernieuwen. Klik op de "Record verwijderen" knop, en voer "1" voor de "Bedrijf A" rij-id, en klik vervolgens op 'OK'. De browser moet nu slechts één rij "Bedrijf B." weergeven

Tips & waarschuwingen

  • Het bovenstaande voorbeeld opslaan geen wijzigingen in een bestand. Dit kan worden bereikt, bijvoorbeeld door het sturen van een DHTML "post" op een server taal zoals PHP, zodat het naar statictable.js met de nieuwe gegevens opgeslagen.