Antonio Ríos

Javascript – Problema 02

admin — Thu, 17 Jun 2010 23:34:06 +0000

PROBLEMA 02

Un alumno desea saber ¿cuál será su calificación final en una materia específica?, dicha calificación se compone de los siguientes porcentajes:

55% del promedio de las tres calificaciones parciales.
30% de la calificación del examen final.
15% de la calificación de un trabajo final.

SOLUCION

DATOS DE INGRESO:

De las notas de 3 calificaciones parciales.
De la nota del examen final.
De la nota del trabajo final.

DATOS DE PROCESO:

Promedio de las calificaciones parciales.
Cálculo del porcentaje del promedio de las calificaciones parciales (55%).
Cálculo del porcentaje del examen final (30%).
Cálculo del porcentaje del trabajo final (15%).
Cálculo de la calificación final.

DATOS DE SALIDA:

Mostrar calificación final.

problema02.html



Ejercicio 02






CALIFICACION FINAL

CALIF. PARC. 1 (cp1): 

CALIF. PARC. 2 (cp2): 

CALIF. PARC. 3 (cp3): 



EXAM. FINAL (ef): 

TRAB. FINAL (tf): 







prom=(cp1+cp2+cp3)/3 : 

ppar=prom*0.55 : 

pef=ef*0.30 : 



ptf=tf*0.15 : 

cf=ppar+pef+ptf : 

&amp;amp;nbsp;
&amp;amp;nbsp;

CALIFICACION FINAL
CALIF. PARC. 1 (cp1):	CALIF. PARC. 2 (cp2):	CALIF. PARC. 3 (cp3):
EXAM. FINAL (ef):	TRAB. FINAL (tf):

prom=(cp1+cp2+cp3)/3 :	ppar=prom*0.55 :	pef=ef*0.30 :
ptf=tf*0.15 :	cf=ppar+pef+ptf :	&amp;nbsp;	&amp;nbsp;

problema02.js

calcular = function() {
// recogemos calificaciones parciales
var cp1 = parseInt(document.f1.tCP1.value);
var cp2 = parseInt(document.f1.tCP2.value);
var cp3 = parseInt(document.f1.tCP3.value);
// recogemos nota de examen final
var ef = parseInt(document.f1.tEF.value);
// recogemos nota de trabajo final
var tf = parseInt(document.f1.tTF.value);
// calculamos el promedio de las calificaciones parciales
var prom = ((cp1 + cp2 + cp3) / 3).toFixed(2);
// calculamos el puntaje del promedio de las calificaciones
var ppar = parseFloat((prom * 55 / 100).toFixed(2));
// calculamos el puntaje del examen final
var pef = parseFloat((ef * 30 / 100).toFixed(2));
// calculamos el puntaje del trabajo final
var ptf = parseFloat((tf * 15 / 100).toFixed(2));
// calculamos la calificación final
var cf = (ppar + pef + ptf).toFixed(2);
// mostramos los resultados
document.f1.tPro.value = prom;
document.f1.tPar.value = ppar;
document.f1.tPEF.value = pef;
document.f1.tPTF.value = ptf;
document.f1.tCF.value = cf;
}

Javascript – Problema 01

admin — Tue, 15 Jun 2010 01:30:30 +0000

PROBLEMA 01

Supongamos que se desea invertir una cantidad X de soles (moneda peruana) en un sistema de ahorro que otorga el 4.5% mensual de interés efectivo, realice un programa que informe ¿cuál es el interés en soles que se va a ganar? y ¿cuál es el total que debe recibirse?

SOLUCION:

DATOS DE INGRESO:

Cantidad a invertir (X).

DATOS DE PROCESO

Interés Mensual 4.5%.

DATOS DE SALIDA

Interés ganado (I).
Total a recibir (T).

problema01.htm



Ejercicio 01







CAPITAL : 



INTERES MENSUAL : 4.5%











INTERES A RECIBIR : 



TOTAL A RECIBIR:

problema01.js

calcular = function() {
// recogemos el valor de capital ingresado
var X = parseInt(document.f1.tCap.value);
// calculamos el interés mensual del capital ingresado
var I = X * 4.5 / 100;
// calculamos el total a recibir
var T = (X + I);
// mostramos los resultados
document.f1.tInt.value = I;
document.f1.tTot.value = T;
}

Eso es todo

Saludos.

Diagramas de Flujo – Normas y Recomendaciones

admin — Tue, 15 Jun 2010 00:22:38 +0000

A pedido de algunos lectores, he decidido enseñar un poco de programación estructurada y más adelante el uso de clases en JavaScript y PHP.

Recuerdo el problema que había en algunos compañeros de la universidad en entender la lógica de los programas y a la hora de los exámenes estar mirando al techo buscando las respuestas.

Para ello utilizaré diagramas de flujo en la mayoría de los problemas que se presente, al menos para mí fue algo importante que me sirvió para entender como funciona la lógica en un computador, luego ya lo dejé al aprenderlo a hacer mentalmente.

La teoría lo pueden encontrar en muchos sitios de internet, sólo busquen.

Vamos a seguir estas Normas y Recomendaciones.

Todo diagrama debe indicar claramente en donde empieza y en donde termina.
Se debe desarrollar preferiblemente de arriba hacia abajo y de izquierda hacia derecha.
Los símbolos deben dibujarse proporcionados y balanceados unos con otros.
En un diagrama se escribe que se hace, no se codifica instrucciones en él.
No debe existir ciclos indefinidos o partes por la cual nunca pase la lógica del programa en ejecución.
Un diagrama debe ser claro y bien presentado.

Las ventajas según wikipedia son:

Favorecen la comprensión del proceso a través de mostrarlo como un dibujo. El cerebro humano reconoce fácilmente los dibujos. Un buen diagrama de flujo reemplaza varias páginas de texto.
Permiten identificar los problemas y las oportunidades de mejora del proceso. Se identifican los pasos redundantes, los flujos de los re-procesos , los conflictos de autoridad, las responsabilidades, los cuellos de botella, y los puntos de decisión.
Muestran las interfaces cliente-proveedor y las transacciones que en ellas se realizan, facilitando a los empleados el análisis de las mismas.
Son una excelente herramienta para capacitar a los nuevos empleados y también a los que desarrollan la tarea, cuando se realizan mejoras en el proceso.

Pronto seguiremos con más.

Saludos.

El tiempo es hoy

admin — Mon, 08 Feb 2010 20:12:39 +0000

Interesante este video que encontré en You Tube, de artistas peruanos que cantan EL TIEMPO ES HOY, la letra es referente al cambio climático que vivimos, ellos buscan la reflexión no sólo de todas las personas del mundo, si no de las autoridades, y que de una vez se tome las medidas para cambiar muchos hábitos malos que tenemos como humanos, la tierra es nuestro hogar es el único que tenemos y debemos cuidarlo.

Lo que nos espera en el futuro: Sexto Sentido

admin — Sat, 19 Sep 2009 02:06:17 +0000

La verdad que no tengo palabras para poder expresar el ver este video que nos habla del futuro en las tecnologías y como avanzamos cada vez a mecanizar nuestra vida, lo que más me agrada de todo esto, es el que no gastaremos más en celulares, notebook, ipod, etc, es una lata siempre estar comprando celulares nuevos con tecnología nueva; me parece bueno lo de los periódicos en línea, lo genial de la información en línea sobre todo tipo de vuelos, lo que no me agrada mucho es lo de calificar a las personas.

Entiendo que todo esto tiene sus pros y sus contras, saquen sus propias conclusiones… para los personas que participamos en utilizar las tecnologías de información con fines prácticos, nos parece genial, hasta pronto.

Ejemplo de 3 listas desplegables con PHP y AJAX usando POST

admin — Thu, 03 Sep 2009 03:30:25 +0000

Gracias a NESS ROMAN que estuvo observando el ejemplo anterior, encontró algunos errores si se puede decir así, me explica que de acuerdo al código del script está seleccionando varios códigos postales sin considerar los datos anteriormente seleccionados (estado y dirección municipal), bueno es cierto, el problema en sí radica que la tabla no está normalizada, si lo estuviera trabajaríamos directamente con los códigos y no con las descripciones y esto evitaría el problema que se presenta.

Bueno haremos las cambios solicitados para esta entrada y ampliar el tema AJAX y las consultas utilizando 2 cosas nuevas la 1ra es usando el método POST donde podrán encontrar en internet muchos ejemplos y el 2do e importante es utilizar una función en JavaScript llamada formData2QueryString que encontré hace mucho en un libro y me parece interesante compartir con ustedes.

Qué hace esta función, comúnmente encontramos que al hacer POST enviamos en el método send de AJAX los parámetros que se envía de esta manera var1=valor1&var2=valor2…. etc. es fácil concatenar esto pero que pasaría si tuvieramos muchos campos y de diferente tipo (input, select,textarea, etc) en el formulario, esta función hace esto (concatenar los campos y sus valores) por nosotros y considera hasta campos con muchos valores (como indica en la ayuda collapseMulti), espero lo entiendan y seguir recibiendo sus comentarios.

Empecemos, lo primero es la página principal

listaejemplo2.htm





Estado:




Delemuni:



Colonia:



Cod.Postal:

Luego insertamos en este script el código javascript

El script PHP que trabajará en el servidor sería:

carga2.php

sql=$sql;
$this->cn = mysql_connect("localhost","usuario","clave");
mysql_select_db("postales");
$this->cargar();
}

function cargar() {
$this->rs=mysql_query($this->sql);
header('Content-Type: text/xml');
echo "\n";
echo "\n";
echo "Seleccione";
while (list($descri) = mysql_fetch_row($this->rs)){
echo "$descri\n";
}
echo "\n";
}

function __destruct() {
mysql_close($this->cn);
}
}
extract($_POST);

switch ($carga){
case 'sEst':	$sql = "SELECT DISTINCT estado FROM codigos"; break;
case 'sDM':	$sql = "SELECT DISTINCT delemuni FROM codigos WHERE estado='$sEst' ORDER BY delemuni"; break;
case 'sCol':	$sql = "SELECT DISTINCT colonia FROM codigos WHERE estado='$sEst' AND delemuni='$sDM' ORDER BY colonia";	break;
default:	$sql = "SELECT DISTINCT cp FROM codigos WHERE estado='$sEst' AND delemuni='$sDM' AND colonia='$sCol' ORDER BY cp";
}

$clCar = new cargar($sql);

?>

Agregamos al script html las siguientes sentencias, para generar las autocargas con AJAX:

onload="cargar('sEst')"

Pueden probar el ejemplo aquí

Puedes ver el ejemplo enviando datos mediante el método GET aquí

Descargar los archivos para este ejemplo aquí

Gracias nuevamente a NESS

Y seguiremos visitando este mundo fascinante de AJAX en próximas entradas.

Hasta pronto.

Jugando Ajedrez Online

admin — Thu, 20 Aug 2009 02:29:24 +0000

Cómo están, en Thinking Machine 4 se puede jugar ajedrez en línea, el nivel no es muy profesional, pero sirve para poder pasar un buen rato, hay que tener cuidado con las figuras ya que no son las clásicas, por lo que hay tener buena memoria para acordarse que pieza está en determinada casilla, lo que si es de admirar es los gráficos existentes y más cuando le toca al programa pensar, llena el tablero con líneas de colores, que por lo que entiendo son las alternativas que encuentra… suerte.

Ejemplo de 3 Listas Desplegables con PHP y AJAX usando GET

admin — Wed, 19 Aug 2009 03:19:59 +0000

Hace un tiempo, recibí un correo de un lector desde México, donde me contaba que estaba haciendo un proyecto y que había leído los casos mostrados de las listas desplegables, necesitaba utilizar 3 listas y todo con AJAX, luego de coordinar el envío de archivos procedí a ayudarlo, los datos estaban en un archivo plano (conocido también como archivo texto o de notepad), luego de migrar a una base de datos, no la normalicé como debía ser, hice todo en una sola tabla, en este caso MySQL, preparé los scripts que paso a hacerlo público y espero sea de utilidad para todos.

La idea es ver los códigos postales de cada sitio, para lo cual hay que llegar hasta ellos, seleccionando primero el Estado a donde pertenece, luego la Delegación Municipal y finalmente la Colonia.

La estructura de la tabla es:

CREATE TABLE 'codigos' (
'id' int(10) NOT NULL auto_increment,
'estado' varchar(30) default NULL,
'cp' varchar(6) default NULL,
'colonia' varchar(50) default NULL,
'delemuni' varchar(30) default NULL,
PRIMARY KEY  (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=78322 ;

Como ven en el auto_increment, cuenta la tabla códigos con bastantes registros, y esto nos servirá para ver lo práctico del uso de AJAX, empecemos.

Para poder mostrar los datos en HTML, creamos una tabla

listasejemplo.html




Estado:



Delemuni:



Colonia:



Cod.Postal:

Cada select está identificado con si respectivo id para poder acceder a él mediante DOM, las listas están vacías todas las llenaremos con AJAX; seguidamente crearemos el objecto XMLHTTPRequest, como sabemos esto es mediante javascript, y nos permitirá ejecutar el código en cualquier navegador y versión, el código sería:

// creando objeto XMLHttpRequest de Ajax
var obXHR;
try {
obXHR=new XMLHttpRequest();
} catch(err) {
try {
obXHR=new ActiveXObject("Msxml2.XMLHTTP");
} catch(err) {
try {
obXHR=new ActiveXObject("Microsoft.XMLHTTP");
} catch(err) {
obXHR=false;
}
}
}

Ahora si tenemos éxito creando el objeto obXHR, necesitamos que cuando hagamos click en cada lista desplegable y escojamos un elemento llene la lista siguiente con datos filtrados de las tablas, para esto creamos una función javascript cargar, esta recibirá dos parámetros, el script php que se ejecutará mediante AJAX y que nos dará los datos y que objeto HTML contendrá los datos siguientes, el script sería:

function cargar(url,obId) {
var obCon = document.getElementById(obId);
obXHR.open("GET", url);
obXHR.onreadystatechange = function() {
if (obXHR.readyState == 4 &amp;&amp; obXHR.status == 200) {
obXML = obXHR.responseXML;
obDes = obXML.getElementsByTagName("descri");
obCon.length=obDes.length;
for (var i=0; i
Para nuestro caso el script PHP va a ser el mismo cuando hagamos clic en cada lista, en el script llamaremos a una clase que debería estar en otro archivo y llamarla con un include, pero por motivos pedagógicos y de estudio está en el mismo archivo, esta clase contiene 3 propiedades y 3 métodos, las propiedades nos permitirán manejar todo lo relacionado a los datos y los métodos a la conección,  a seleccionar la base de datos, cerrarla, y también las consultas a la tabla.
cargar.php

 

class cargar {
var $cn;		var $rs;		var $sql;

function __construct($sql) {
$this->sql=$sql;
$this->cn = mysql_connect("localhost","usuario","clave");
mysql_select_db("basededatos");
$this->cargar();
}

function cargar() {
$this->rs=mysql_query($this->sql);
header('Content-Type: text/xml');
echo "\n";
echo "\n";
echo "Seleccione";
while (list($descri) = mysql_fetch_row($this->rs)){
echo "$descri\n";
}
echo "\n";
}

function __destruct() {
mysql_close($this->cn);
}
}
// fin de la clase cargar
extract($_GET);

if (isset($est)) {
$sql = "SELECT DISTINCT delemuni FROM codigos WHERE estado='$est' ORDER BY delemuni";
}elseif (isset($dm)) {
$sql = "SELECT DISTINCT colonia FROM codigos WHERE delemuni='$dm' ORDER BY colonia";
}elseif (isset($col)) {
$sql = "SELECT DISTINCT cp FROM codigos WHERE colonia='$col' ORDER BY cp";
}else {
$sql = "SELECT DISTINCT estado FROM codigos";
}

$clCar = new cargar($sql);


Luego de la clase tenemos la sentencia extract, lo que hace es convertir a variables todo lo que mandemos como método GET, según la lista iremos usando diferentes consultas SQL a la tabla.
Finalmente agregamos eventos onchange a las listas quedaría así cada una:





y por último necesitamos que la primera lista se cargue junto con la página, por lo que usaremos el evento onload de la etiqueta body



Estúdienlo, no he entrado en detalles teóricos, pues está simple y espero se entienda y les sirva….
El demo está aquí.
Ya vimos anteriormente todas las formas de cargar listas desplegables, incluyendo con AJAX.
Puedes ver el ejemplo enviando datos mediante el método POST aquí
Para descargar los archivos del ejemplo pulsa aquí.
hasta pronto
Saludos

Tecnología de los 80

admin — Sat, 09 May 2009 21:38:55 +0000

Para los que hemos vivido en la década de los 80 es agradable poder recordar momentos de nuestras vidas con las tecnologías que aparecían, al igual que hace la música este video llena de recuerdos nuestra mente y nos hace volver a revivir etapas de nuestra vida.

Es especial los momentos cuando luego de clases de la escuela visitar los sitios con los juegos en 2d y que hasta la fecha por su simpleza aún nos atraen, el rubik que fue fenomenal con los concursos entre compañeros, el ir a todas partes con nuestro walkman y la música a gusto y poder disfrutar de las pelis (en esos momentos alquiladas) en casa.

Es interesantes observar que hace poco como ha evolucionado la tecnología a lo que tenemos hoy, bien hecho The History Chanel que a propósito es uno de mis canales favoritos en el cable, espero lo disfruten.

Hasta pronto.

Google Chrome

admin — Sun, 07 Sep 2008 14:55:41 +0000

Me parece interesante la forma como ve Google los navegadores y el salto que deben de dar para que la Web alcance un siguiente nivel…

El equipo que creó Google Chrome y todas sus funciones nos cuenta su historia.

www.google.com/chrome

Hasta pronto

CAPITAL :
INTERES MENSUAL :	4.5%



INTERES A RECIBIR :
TOTAL A RECIBIR: