Introducción
En este trabajo estaremos enfocándonos en realizar un proyecto en donde se
estará creando una página web en HTML en donde estaremos utilizando lenguaje
JavaScript para obtener los datos que están incluidos en un archivo de tipo texto
los cuales se presentaran en una tabla con sus respectivos datos.
Índice
Introducción
o Archivo de datos.txt
o Código HTML de la Pagina Web en HTML y JavaScript
o Pantalla capturada del archivo de datos.txt
o Pantalla capturada de la página web
Conclusión
Bibliografía
Archivo de datos.txt
Registro1="Mario";
Registro2="Atencio";
Registro3="8-782-2289";
Registro4="233-7867";
Registro5="[email protected]";
Enlace="web.html";
Registro6="Roberto";
Registro7="Icaza";
Registro8="8-582-2149";
Registro9="393-5517";
Registro10="[email protected]";
Enlace="web.html";
Código HTML de la Pagina Web en HTML y JavaScript
<html>
<head>
<script src="Clientes.txt"></script>
<script type="text/javascript">
function CargarClientes(){
document.getElementById("Campo1").innerText=Registro1;
document.getElementById("Campo2").innerText=Registro2;
document.getElementById("Campo3").innerText=Registro3;
document.getElementById("Campo4").innerText=Registro4;
document.getElementById("Campo5").innerText=Registro5;
document.getElementById("Campo6").innerText=Registro6;
document.getElementById("Campo7").innerText=Registro7;
document.getElementById("Campo8").innerText=Registro8;
document.getElementById("Campo9").innerText=Registro9;
document.getElementById("Campo10").innerText=Registro10;
document.getElementById("CampoEnlace").href=Enlace;
}
</script>
</head>
<body>
<a class="btn btn-primary btn-lg" href='javascript:;' onclick="CargarClientes();"
role="button">
Mostrar Clientes »
</a>
<form name="form" method="post" action="">
<table width="393" border="0" align="center" cellpadding="5" cellspacing="1"
bgcolor="#8ADBFE">
<tr>
<td colspan="2" align="center" bgcolor="#FFFFFF">
<span class="Estilo1">Mostrar Clientes</span> </td>
</tr>
<tr>
<td width="110" bgcolor="#BDEBFE"><strong>Nombre</strong></td><td
width="260" bgcolor="#CBCBCB">
<input name="Nombre" type="text" id="Campo1" />
</td>
</tr>
<tr>
<td bgcolor="#BDEBFE"><strong>Apellido</strong></td>
<td bgcolor="#CBCBCB"><input name="Apellido" type="text" id="Campo2" />
</td>
</tr>
<tr>
<td width="110" bgcolor="#BDEBFE"><strong>Cedula</strong></td><td
width="260" bgcolor="#CBCBCB">
<input name="Cedula" type="text" id="Campo3" />
</td>
</tr>
<tr>
<td bgcolor="#BDEBFE"><strong>Telefono</strong></td>
<td bgcolor="#CBCBCB"><input name="Telefono" type="text" id="Campo4" />
</td>
</tr>
<tr>
<td bgcolor="#BDEBFE"><strong>Email</strong></td>
<td bgcolor="#CBCBCB"><input name="Email" type="text" id="Campo5" />
</td>
</tr>
<tr>
<td width="110" bgcolor="#BDEBFE"><strong>Nombre</strong></td><td
width="260" bgcolor="#CBCBCB">
<input name="Nombre" type="text" id="Campo6" />
</td>
</tr>
<tr>
<td bgcolor="#BDEBFE"><strong>Apellido</strong></td>
<td bgcolor="#CBCBCB"><input name="Apellido" type="text" id="Campo7" />
</td>
</tr>
<tr>
<td width="110" bgcolor="#BDEBFE"><strong>Cedula</strong></td><td
width="260" bgcolor="#CBCBCB">
<input name="Cedula" type="text" id="Campo8" />
</td>
</tr>
<tr>
<td bgcolor="#BDEBFE"><strong>Telefono</strong></td>
<td bgcolor="#CBCBCB"><input name="Telefono" type="text" id="Campo9" />
</td>
</tr>
<tr>
<td bgcolor="#BDEBFE"><strong>Email</strong></td>
<td bgcolor="#CBCBCB"><input name="Email" type="text" id="Campo10" />
</td>
</tr>
</table>
<br />
<a id="CampoEnlace">Volver a la página anterior</a>
</body>
</html>
Pantalla capturada del archivo de datos.txt
Pantalla capturada Página web
Conclusión
Al dar por concluido este proyecto logramos obtener un aprendizaje muy fructífero
ya que pudimos aprender el cómo utilizar el lenguaje JavaScript creando una
función para poder obtener los datos que introducimos manualmente en un archivo
creado en notepad, el cual es .txt, utilizamos el método getElementById que nos
sirve para obtener información de un elemento en su documento mediante una ID
específica y usamos innerText para devolver el elemento de los datos de texto y
se le asignó un botón para mostrar los datos en una tabla, finalmente para
terminar se le asignó un enlace para volver a la página web de inicio.
Bibliografía
https://msdn.microsoft.com/es-es/library/
system.windows.forms.htmlelement.innertext(v=vs.110).aspx
https://www.w3schools.com/jsref/met_document_getelementbyid.asp
