2

He estado haciendo esto como actividad, ya que estoy aprendiendo JavaScript.

Según lo que dice el ejercicio es esto:

La idea es que cuando se haga clic en el botón Registrar Estudiante se capturen los siguientes datos: el código, el nombre, y la nota digitada. Estos datos hay que guardarlos como un objeto estudiante en un JSON para luego utilizarlo.

Aquí esta el código que tengo al momento (o jsfiddle):

function registro() {

	var infoEstudiante;

	codigoE = String(document.getElementById('codigo').value);
	nombreE = String(document.getElementById('nombre').value);
	notaE = parseFloat(document.getElementById('nota').value);

// prueba de como deberia quedar la informacion
	document.getElementById('codigo1').value = codigoE;
	document.getElementById('nombre1').value = nombreE;
	document.getElementById('nota1').value = notaE;

	 alert("El Estudiante ha sido registrado con exito");

function log(str) {
	var logEl = document.createElement("td");
	logEl.textContent = str;
	logEl.className = "logCSS"; 
	document.getElementById('otraprueba').appendChild(logEl);
	//document.body.appendChild(logEl);  prueba
}

log(codigoE); log(nombreE); log(notaE);

}
<h1>Registro de Estudiante</h1>

Codigo: 
<br><input type="text" id="codigo" value="" /><br>
Nombre: 
<br><input type="text" id="nombre" value="" /><br>
Nota: 
<br><input type="text" id="nota" value="" /><br>
<br>
<button onclick="registro()">Registrar Estudiante</button>
<button onclick="mostrar_promedio()">Mostrar Promedio</button>
<button onclick="mostrar_nota_mayor()">Mostrar Nota Mayor</button>
<button onclick="mostrar_nota_menor()">Mostrar Nota Menor</button>

<h1>Listado de Estudiantes</h1>

<table border="1" id="otraprueba">

	<td>Codigo</td><td>Nombre</td><td>Nota</td>
	<tr></tr>
    <td>
    <input type="text" id="codigo1" value="" disabled="" /></td>
    <td>
    <input type="text" id="nombre1" value="" disabled="" /></td>
    <td>
    <input type="text" id="nota1" value="" disabled="" /></td>
    <tr></tr>
	<td id="codigo12">debajo va child</td><td id="nombre12"></td><td id="nota12"></td>
	<tr></tr>
</table>
<div id="ultimaprueba"></div>

La pregunta: ¿Cómo usar un JSON usando un formulario, sin otro programa ni base de datos, solo JavaScript? Y quiero usarlo para sacar promedio de las personas que se agreguen por medio de alertas y al igual ¿cómo crear un nuevo nodo que se pueda dividir por 3 secciones, ya que a mi me sale pero queda todo unido?

NOTA IMPORTANTE: No sé por qué no corre el código en donde está, pero es lo que he estado haciendo en sublime y DW y funciona, sólo lo uso como referencia para mostrar la información.

1
  • Hola Kris, no se exactamente que hay que arreglar. Lo he probado y funciona, o por lo menos añade registros a la tabla inferior. Commented el 20 ene. 2017 a las 8:18

2 respuestas 2

0

No sé exactamente lo que te piden porque es algo confuso, pero aquí tienes un ejemplo de cómo guardar los datos en una matriz mediante el uso de la notación de JavaScript (JSON).

Al final de cada introducción suma aquellos alumnos cuya nota sea válida (la conversión parseFloat() no ha devuelto un NaN) y calcula la nota media.

También he arreglado la función de log() para que cree correctamente una nueva fila con una columna por cada parámetro introducido.

var estudiantes = [];

function log() {
  var logEl = document.createElement("tr");
  for (var i = 0; i < arguments.length; i++) {
    /* Creamos un nodo de texto HTML con escapado de etiquetas (seguro) */
    var texto = document.createTextNode(arguments[i]);
    var td = document.createElement('td');
    td.appendChild(texto);
    logEl.appendChild(td);
  }
  logEl.className = "logCSS";
  document.getElementById('otraprueba').appendChild(logEl);
}

function registro() {
  var codigoE = document.getElementById('codigo').value;
  var nombreE = document.getElementById('nombre').value;
  var notaE = parseFloat(document.getElementById('nota').value);

// prueba de como deberia quedar la informacion
  document.getElementById('codigo1').value = codigoE;
  document.getElementById('nombre1').value = nombreE;
  document.getElementById('nota1').value = notaE;
  /*alert("El Estudiante ha sido registrado con exito");*/
  log(codigoE, nombreE, notaE);
  /* Te separo la notación JSON para destacarla */
  estudiantes.push(
    {
      'codigo':codigoE,
      'nombre':nombreE,
      'nota':notaE
    }
  );
  console.log(estudiantes);
  var suma = 0;
  var numero = 0;
  for (var i in estudiantes) {
    if (!isNaN(estudiantes[i].nota)) {
      numero++;
      suma += estudiantes[i].nota;
    }
  }
  if (numero > 0) {
    alert("Nota media: " + (suma / numero));
  }
}
<h1>Registro de Estudiante</h1>

Codigo: 
<br><input type="text" id="codigo" value="" /><br>
Nombre: 
<br><input type="text" id="nombre" value="" /><br>
Nota: 
<br><input type="text" id="nota" value="" /><br>
<br>
<button onclick="registro()">Registrar Estudiante</button>
<button onclick="mostrar_promedio()">Mostrar Promedio</button>
<button onclick="mostrar_nota_mayor()">Mostrar Nota Mayor</button>
<button onclick="mostrar_nota_menor()">Mostrar Nota Menor</button>

<h1>Listado de Estudiantes</h1>

<table border="1" id="otraprueba">

	<td>Codigo</td><td>Nombre</td><td>Nota</td>
	<tr></tr>
    <td>
    <input type="text" id="codigo1" value="" disabled="" /></td>
    <td>
    <input type="text" id="nombre1" value="" disabled="" /></td>
    <td>
    <input type="text" id="nota1" value="" disabled="" /></td>
    <tr></tr>
	<td id="codigo12">debajo va child</td><td id="nombre12"></td><td id="nota12"></td>
	<tr></tr>
</table>
<div id="ultimaprueba"></div>

3
  • Ooook,Gracias!!! esto si me ha funcionado, ahora, solo para entender, ahi tenia que usar el console.log(estudiantes); para que guardara el ainfor de los estudiantes y luego emitir el alert? Otra cosa, esa parte de la consola la pudo poner aparte para agregarla a un botón como función y para las otras cosas funciones como nota alta y baja?
    – Khris
    Commented el 20 ene. 2017 a las 17:59
  • Yo, personalmente, odio los alert(), prefiero ver alguna ayuda visual del registro nuevo pero poder agregar inmediatamente el siguiente. Claro que puedes hacer lo de agregar más funciones. Incluso un botón de actualizar para rehacer la tabla (eliminar las filas y volver a insertarlas a partir de los datos almacenados en la variable). Commented el 20 ene. 2017 a las 18:03
  • Muy interesante, lo tomare en cuenta mas que estoy entrando en este mundo, eso ayuda mucho, gracias!
    – Khris
    Commented el 21 ene. 2017 a las 4:47
0

Captura los datos y guardalos en un json, luego recorre el json y crea un tr con sus td dependiendo de los datos que tiene el json, mira el ejemplo

function registro() {

var infoEstudiante = {};

codigoE = String(document.getElementById('codigo').value);
nombreE = String(document.getElementById('nombre').value);
notaE = parseFloat(document.getElementById('nota').value);

infoEstudiante['codigo'] = codigoE;
infoEstudiante['nombre'] = nombreE;
infoEstudiante['nota']   = notaE;

function log(info) {
var logEl = document.createElement("tr");

    for (var i = 0; i < info.length; i++) {
        logEl.createElement("td");
        logEl.getElementsByTagName('td')[i].textContent = info[i];
    };
    logEl.className = "logCSS"; 
    document.getElementById('otraprueba').appendChild(logEl);

    }
}

log(infoEstudiante)

Espero te sirva, saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.