-
Tutorial sobre las bases de datos de JavaScript
-
Un programa de JavaScript se ejecuta en el navegador Web. Por razones de seguridad, JavaScript no puede escribir en un equipo local, que no sea el uso de "cookies" temporales, ni se puede escribir en un servidor Web.Para construir la funcionalidad de base de datos relacional, una base de datos relacional necesita ser instalado en el servidor Web, y la funcionalidad de manejo de base de datos debe estar escrito en un lenguaje de servidor como PHP. JavaScript puede hacer llamadas a la función de base de datos utilizando AJAX.
Sin embargo, si se requiere no relacional funcionalidad "en tiempo de ejecución única" Insertar, consultar, actualizar y borrar en una "tabla estática", una "base de datos" puro JavaScript se pueden crear utilizando la biblioteca de código abierto "Taffydb".
Instrucciones
Creación de una página de resultados SELECT
1 Navegue por su navegador a la página de descarga Taffydb en GitHub. (Vea la sección Recursos.) Haga clic en el botón "Descargar Fuente", seleccionar "zip", y guardar "typicaljoe-taffydb-d3a8525.zip" para el escritorio del equipo.
2 Taffy.js extraer desde el archivo ZIP y guardarlo en su escritorio.
3 Crear un documento de texto en blanco en el escritorio y renombrarlo como "statictable.js". statictable.js abiertas en el Bloc de notas, y copiar y pegar el siguiente código JavaScript.
var = new mytaffy TAFFY ([
{Id: 1, nombre: "Compañía A", la puntuación: "80", descripción: "2/5/10"},
{Id: 2, nombre: "Compañía B", la puntuación: "90", descripción: "2/6/10"}
]);
4 Guardar statictable.js. Crear un documento de texto en blanco en el escritorio y renombrarlo como "myhtml.html". myhtml.html abierta en el Bloc de notas, y copiar y pegar el código siguiente.
<Html>
<Head>
<script type="text/javascript"></script>& Lt; script>
var ref = 2;
refreshDisplay función () {
tratar{
salida = document.getElementById ( "display");
output.innerHTML = "";
mytaffy.orderBy ([{ "puntuación": "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 de Registros:" + Ltotal;
} Catch (err) {
alerta (err.description);
}
}
</ Script>
</ Head>
<Body onLoad = "refreshDisplay ()">
<H3> Resultados de la base: </ h3>
fila-id, nombre, puntuación, descripción
<Div id = "display"> </ div>
</ Body>
</ Html>
5 Guardar myhtml.html. Haga doble clic en el icono del escritorio myhtml.html, para poder verla dentro de un navegador Web. Tenga en cuenta que el evento "body onLoad" llama la "refreshDisplay ()" función cuando se carga la página arriba, y los resultados se muestran en el elemento DOM con id "pantalla".
6 Pulse la tecla "Alt" + "TAB" para seleccionar el navegador. Pulse la tecla "F5" para actualizar la página HTML. El navegador mostrará las dos filas "Compañía A" y "Compañía B"
Adición de una fila
7 Pulse la tecla "Alt" + "TAB" para seleccionar el Bloc de notas. Copiar y pegar el siguiente código encima de la "</ script>" etiqueta de cierre en el Bloc de notas para insertar una función para agregar un registro.
addRecord funcionar () {
línea var = prompt (
"Por favor, introduzca su nombre, puntuación, y la fecha, separados por comas:");
toks var = linea.split ( ",");
si (toks.length> = 3) {
var lname=toks[0];var = parseInt (LScore toks [1]);
var = parseInt LDate (toks [2]);
ref = ref + 1;
mytaffy.insert({ id:ref, name:lname, score:lscore, description:ldate } );}
refreshDisplay ();
}
8 Copiar y pegar el siguiente código encima de la "</ body>" etiqueta de cierre en el Bloc de notas para crear un botón de "Agregar".
<Input type = "button" id = "btnCreate" onclick = "addRecord ()" value = "Agregar"> </ input>
9 Pulse la tecla "Alt" + "TAB" para seleccionar el navegador. Pulse la tecla "F5" para actualizar la página HTML. Haga clic en el botón "Agregar", y entre "Compañía C, 85, 2/7/10" en el símbolo, a continuación, haga clic en "Aceptar". El navegador debería mostrar ahora el nuevo registro.
Actualización de una fila
10 Pulse la tecla "Alt" + "TAB" para seleccionar el Bloc de notas. Copiar y pegar el siguiente código encima de la "</ script>" etiqueta de cierre en el Bloc de notas para agregar la función JavaScript para actualizar un registro.
updateRecord funcionar () {
var = parseInt Lref (prompt ( "Por favor, introduzca el número de fila-id"));
var = parseInt lline (prompt ( "Por favor, introduzca la nueva puntuación"));
mytaffy.update ({
score:lline}, {Id: Lref});
refreshDisplay ();
}
11 Copiar y pegar el siguiente código encima de la "</ body>" etiqueta de cierre en el Bloc de notas para agregar un botón de "Actualizar registro".
<Input type = "button" id = "btnUpdate" onclick = "updateRecord ()" value = "Actualizar registro"> </ input>
12 Pulse la tecla "Alt" + "TAB" para seleccionar el navegador. Pulse la tecla "F5" para actualizar la página HTML. Haga clic en el botón "Actualizar registro", y entre "1" para la "Compañía A" fila-id, y luego haga clic en "Aceptar". A continuación, introduzca "95" y haga clic en "Aceptar". El navegador debería mostrar ahora la puntuación actualizada para "Compañía A."
La eliminación de una fila
13 Pulse la tecla "Alt" + "TAB" para seleccionar el Bloc de notas. Copiar y pegar el siguiente código encima de la "</ script>" etiqueta de cierre en el Bloc de notas para insertar una función para eliminar un registro.
deleteRecord funcionar () {
var = parseInt Lref (prompt ( "Por favor, introduzca el número de fila-id"));
mytaffy.remove ({id: Lref});
refreshDisplay ();
}
14 Copiar y pegar el siguiente código encima de la "</ body>" etiqueta de cierre en el Bloc de notas para crear un botón "Eliminar registro".
<Input type = "button" id = "btnDelete" onclick = "deleteRecord ()" value = "Eliminar registro"> </ input>
15 Pulse la tecla "Alt" + "TAB" para seleccionar el navegador. Pulse la tecla "F5" para actualizar la página HTML. Haga clic en el botón "Eliminar registro", y entre "1" para la "Compañía A" fila-id, y luego haga clic en "Aceptar". El navegador debería mostrar ahora sólo una fila "Compañía B"
Consejos y advertencias
- El ejemplo anterior no guardar los cambios en un archivo. Esto se puede lograr, por ejemplo, mediante el envío de un DHTML "post" a un idioma del servidor como PHP, por lo que se ahorra a statictable.js con los nuevos datos.
