Archivo

Posts Tagged ‘JavaScript’

JSON (JavaScript Object Notation || Literal JavaScript) VS XML (Extensible Markup Language)

Bueno esta es una breve comparación que he hecho sobre dos lenguajes intermedios… ¿ a que me refiero con “intermedios” ? Que son lenguajes de intercambio de datos entre aplicaciones.

01.- Definiciones

XML, siglas en inglés de Extensible Markup Language (lenguaje de marcas extensible), es un metalenguaje extensible de etiquetas desarrollado por el World Wide Web Consortium (W3C).

JSON, acrónimo de JavaScript Object Notation, es un formato ligero para el intercambio de datos. JSON es un subconjunto de la notación literal de objetos de JavaScript que no requiere el uso de XML.

02.- Estructura

Ahora dejaré el mismo código escrito en ambos lenguajes

XML

<?xml version="1.0" encoding="utf-8" ?>
<Empleados>
	<Empleado tipo="Honorario">
		<Nombre>Juan Peres</Nombre>
		<Edad>56</Edad>
		<HorasTrabajadas>5</HorasTrabajadas>
		<ValorHora>10</ValorHora>
	</Empleado>
</Empleados>

213 caracteres, 229 bytes 9 líneas

JSON

{ empleados : [
	{
		tipo: "Honorario",
		nombre: "Juan Peres",
		edad: 56,
		HorasTrabajadas: 5,
		ValorHora: 10
	}
]}

120 caracteres, 136 bytes, 9 líneas

Bien hasta aquí bien parecidos, ambos con una estructura jerárquica,aunque JSON aquí saca la primera ventaja:
JSON pesa menos que XML, ésto es gracias a que no usa tags, esto disminuye su peso.

03.- Carga en el Servidor

Bueno siguiendo con el ejemplo anterior les dejo el siguiente caso: Ahora quiero mostrar el sueldo del empleado honorario, eso se hace con la siguiente formula:

Sueldo = HorasTrabajadas * ValorHora

XML

<?xml version="1.0">
<Empleados>
	<Empleado tipo="Honorario">
		<Nombre>Juan Peres</Nombre>
		<Edad>56</Edad>
		<HorasTrabajadas>5</HorasTrabajadas>
		<ValorHora>10</HorasTrabajadas>
		<Sueldo>50</Sueldo>
	</Empleado>
</Empleado>

JSON

{ empleados : [
	{
		tipo: "Honorario",
		nombre: "Juan Peres",
		edad: 56,
		horasTrabajadas: 5,
		valorHora: 10,
		sueldo: function() { return this.horasTrabajadas * this.valorHora }
	}
]}

Aqui se ve la primera diferencia notable de JSON, en el primer caso se hizo un calculo por el lado del servidor, donde internamente se multiplico HorasTrabajadas * ValorHora.
Sin embargo en el caso de JSON sueldo se declara como una función que será procesada por el lado del cliente.En JavaScript lo que esta entre llaves { } se refieren a un Objeto y lo que esta entre corchetes [ ] a un Arreglo

entonces los datos, al estar en un objeto, vienen a ser atributos de dicho objeto, por lo que puedo llamar a esos atributos dentro de la función sueldo  que declaré

sueldo: function() { return this.horasTrabajadas * this.sueldo }

¿ Que ventajas trae ésto ? que el servidor se ahorra el procesamiento de esos cálculos y deja a los clientes que lo hagan por el

04.- Obtención de Datos

Para obtener los datos usaré JQuery Framework para hacerlo aun mas fácil .

Obtener XML

<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
		<script type="text/javascript">
			$.ajax({
				type: "GET",
				url: 'empleados.xml?random='+(Math.random() * (9999-1111)),
				dataType: "xml",
				success: function(data){
					$('Empleado',data).each(function() {
						$('<p>').append(
							"[Nombre: "+$('Nombre',this).text()+"] [Sueldo: "+$('Sueldo',this).text()+"]"
						).appendTo('#empleados')
					});
				}
			});
		</script>
	</head>
	<body>
		<div id="empleados"></div>
	</body>
</html>

Ejemplo: http://estebanfuentealba.net/ejemplos/jsonVSxml/getXML.html

Obtener JSON

<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
		<script type="text/javascript">
			$.ajax({
				type: "GET",
				url: 'empleados.json?random='+(Math.random() * (9999-1111)),
				dataType: "json",
				success: function(data){
					$.each(data.empleados,function(i,emp) {
						$('<p>').append(
							"[Nombre: "+emp.nombre+"] [Sueldo: "+emp.sueldo()+"]"
						).appendTo('#empleados')
					});
				}
			});
		</script>
	</head>
	<body>
		<div id="empleados"></div>
	</body>
</html>

Ejemplo: http://estebanfuentealba.net/ejemplos/jsonVSxml/getJSON.html

En el caso de XML hay que BUSCAR los datos en el archivo por tags y de ese resultado sacar el texto, En cambio en JSON , al ser un objeto, puedo acceder a sus propiedades directamente.

Tiempo de descarga (Promedio de 5 Pruebas) :

XML		378,4 ms Aprox
JSON		346,6 ms Aprox

05.- Cross Domain

Una de las desventajas de XML es que con Ajax no se puede acceder a algún archivo o WebService de un dominio diferente al que estamos. Esto solo se puede realizar creando un proxy con algún lenguaje de servidor, ocupando nuevamente recursos del servidor (no es optimo)

Para éste ejemplo Tengo un “WebService” en el dominio mp3spider.com.ar

Link del WebService: http://mp3spider.com.ar/WebService.php

Parametro Valor Descripción
datatype string xml o json.
callback string Nombre del metodo a llamar, solo si datatype=json .

Ahora dejaré Las pruebas:

AJAX (Asynchronous JavaScript And XML) Cross Domain

<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
		<script type="text/javascript">
			$.ajax({
				type: "GET",
				url: 'http://mp3spider.com.ar/WebService.php?datatype=xml',
				dataType: "xml",
				success: function(data){
					$('<p>').append(
						"[Host: "+$('host',data).text()+"]"
					).appendTo('#crossdomain');
				},
				error: function (XMLHttpRequest, textStatus, errorThrown) {
					alert(textStatus);
				}
			});
		</script>
	</head>
	<body>
		<div id="crossdomain"></div>
	</body>
</html>

Ejemplo: http://estebanfuentealba.net/ejemplos/jsonVSxml/crossdomain/crossdomainXML.html

Para poder acceder al WebService Tengo que hacer un proxy en el servidor donde llamo al servicio, en Yahoo explican como hacer uno


AJAJSON (Asynchronous JavaScript And JavaScript Object Notation) Cross Domain

<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
		<script type="text/javascript">
			$.ajax({
				type: "GET",
				url: 'http://mp3spider.com.ar/WebService.php?datatype=json&callback=?',
				dataType: "json",
				success: function(data){
					$('<p>').append(
						"[Host: "+data.host+"]"
					).appendTo('#crossdomain');
				},
				error: function (XMLHttpRequest, textStatus, errorThrown) {
					alert(textStatus);
				}
			});
		</script>
	</head>
	<body>
		<div id="crossdomain"></div>
	</body>
</html>

Ejemplo: http://estebanfuentealba.net/ejemplos/jsonVSxml/crossdomain/crossdomainJSON.html

Ésta es la mejor ventaja de JSON porque podemos traer datos desde otros dominios sin recurso del servidor, lo que con XML no se puede lograr si no se tiene un proxy. Este crossdomain es gracias a JSONP (JSON with Padding) que es una técnica descubierta el 2005 por gente de YAHOO , consiste en agregar el script a la pagina … supongamos que queremos traer este documento remoto json:

http://mp3spider.com.ar/WebService.php?datatype=json&callback=hola
nos devuelve:

hola({ host: "mp3spider.com.ar" })

Eso quiere decir que se llama a una funcion llamada hola y se le pasa por parametro un objeto que tiene un atributo llamado host. Entonces, para que funcione, deberiamos tener en la pagina de donde llamamos a ese documento json dicho metodo hola

function hola(datos) {
alert(datos.host);
}

quedando algo similar a esto

<html>
	<head>
		<script type="text/javascript">
			/* Defino la funcion que recibirá los datos de la pagina remota */
			function hola(datos) {
				alert(datos.host);
			}
		</script>
		<!-- Agrego el Script Remoto , el callback es el nombre del metodo que lo recibirá en este página -->
		<script src="http://mp3spider.com.ar/WebService.php?datatype=json&callback=hola"></script>
	</head>
	<body>
	</body>
</html>

Ejemplo: http://estebanfuentealba.net/ejemplos/jsonVSxml/crossdomain/JSONPEjemplo.html

En fin JQuery hace eso por debajo sin darnos cuenta.

Con tanta api dando vuelta por el mundo de la web 2.0 JSON es una herramienta que se agradece y bien util. Como pudieron ver en estas comparaciones en el ámbito web agiliza y optimiza el intercambio de datos, por lo que sin ninguna duda me quedo con JSON.

Espero que les sirva ,

Saludos

Crear DLL en C# .NET y llamarla desde JavaScript

Hoy estaba creando un Gadget para Windows 7 con HTML y Javascript, Lo malo es que el gadget tenía que procesar mucho, por lo que aveces se pegaba el navegador, asi que se me ocurrio crear un programa en C# para que el procesamiento lo hiciera .NET y Javascript solo fuera el puente entre la parte grafica (HTML) y el proceso (.NET)….Para eso investigue sobre  librerías en .NET y Interoperabilidad COM lo que me parecio bastante útil he interesante ya que puedo ocupar una librería casi desde cualquier otro lenguaje. En este ejemplo mostraré como usar una DLL escrita en C# desde JavaScript.

Parte 1 Libreria C#

Bueno lo primero es Ejecutar Visual Studio como Administrador

Una vez abierto Nos vamos a :
File / New / Proyecto

Ahora elegimos Class Library y le damos un nombre a nuestro Proyecto

Ya ahora en la misma Class1 que nos auto generó empezaremos a programar. Lo primero es crear una GUID ,una clave que nos identificará nuestra librería, para eso vamos a
Tools / Crear GUID

Seleccionamos la opcion 2 Define GUID y presionamos el boton Copy

Lo que esta en verde claro es nuestra GUID.

Para que Class1 pueda ser visible desde el exterior es necesario importar System.Runtime.InteropServices y hacer unas declaraciones en la clase

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Runtime.InteropServices;
namespace TestLib {
    [ComVisibleAttribute(true)]  //Deja la clase visible para COM
    [Guid("134FC6AB-E594-4e5b-84F2-5CC612FF69D3")] //GUID que generamos, Identificador de la Libreria
    [ProgId("TestLib.Class")] //Identificador para poder Acceder a esta clase desde el exterior
    public class Class1 {
        public string Hola() {
            return "Hola Mundo desde .NET";
        }
    }
}

Una vez listo el código debemos ir a las propiedades del proyecto

Una vez dentro de las propiedades nos dirigimos a Generar y chequeamos la opción  Registrar para interoperabilidad COM.

Esto permitirá que al generar nuestro proyecto, la librería quede en el registro de windows de la maquina donde se generó, para así poderla ocupar.

Por ultimo generamos nuestra Libreria

------ Operación Generar iniciada: proyecto: TestLib, configuración: Debug Any CPU ------
C:\Windows\Microsoft.NET\Framework\v3.5\Csc.exe /noconfig /nowarn:1701,1702 /errorreport:prompt /warn:4 /define:DEBUG;TRACE /reference:"C:\Program Files\Reference Assemblies\Microsoft\Framework\v3.5\System.Core.dll" /reference:"C:\Program Files\Reference Assemblies\Microsoft\Framework\v3.5\System.Data.DataSetExtensions.dll" /reference:C:\Windows\Microsoft.NET\Framework\v2.0.50727\System.Data.dll /reference:C:\Windows\Microsoft.NET\Framework\v2.0.50727\System.dll /reference:C:\Windows\Microsoft.NET\Framework\v2.0.50727\System.Xml.dll /reference:"C:\Program Files\Reference Assemblies\Microsoft\Framework\v3.5\System.Xml.Linq.dll" /debug+ /debug:full /filealign:512 /optimize- /out:obj\Debug\TestLib.dll /target:library Class1.cs Properties\AssemblyInfo.cs

Compile complete -- 0 errors, 0 warnings
TestLib -> C:\Users\Esteban\Documents\Visual Studio 2008\Projects\TestLib\TestLib\bin\Debug\TestLib.dll
========== Generar: 1 correctos o actualizados, 0 incorrectos, 0 omitidos ==========

Ahora vamos a la carpeta Bin/Debug de nuestro proyecto y debería encontrarse nuestra Librería

Parte 2 HTML + JavaScript

Con la DLL lista ahora solo queda programar la “interfaz gráfica”, en verdad solo mostraré el texto traído desde el método de la librería por una alerta xD

para ello es el siguiente código

<html>
	<head>
		<script type="text/javascript">
			/* Creando una instancia de ActiveXObject para poder acceder a nuestra libreria */
			var obj = new ActiveXObject("TestLib.Class"); /* ProgId de la Clase */
			alert(obj.Hola()); /* llamando al metodo Hola de la DLL */
		</script>
	</head>
	<body>
		<!-- Cuerpo -->
	</body>
</html>

El Anterior código lo guardaré, para testear, con extensión HTA


Y por ultimo Ejecutamos la aplication.hta y debería mostrarnos la alerta con el texto que retorna nuestra librería

Parte 3 Registro Manual para Interoperabilidad COM

Bueno mas de alguno debe preguntarse como es que se linquea la dll que generé (TestLib.dll) con ActiveXObject(“TestLib.Class”); porque no le paso la ruta de la libreria ni nada por el estilo. Bueno lo que hizo Visual Studio al generar el archivo TestLib.dll fue guardar en el registro de windows la ubicación de la DLL y lo asoció a TestLib.Class.
Entonces si ustedes Quieren Ocupar esta dll en sus maquinas no podrán porque en su registro no existe dicha asociación lanzandoles un error como éste:

Para que puedan testearla en sus pcs les dejo un archivo.reg que hice para registrar la DLL.

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}]
@="TestLib.Class1"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32]
@="mscoree.dll"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32]
"Assembly"="TestLib, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32]
"Class"="TestLib.Class1"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32]
"CodeBase"="file:///C:/JavaScript + Libreria C Sharp/TestLib.dll"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32]
"RuntimeVersion"="v2.0.50727"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32]
"ThreadingModel"="Both"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32\1.0.0.0]
"Assembly"="TestLib, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32\1.0.0.0]
"Class"="TestLib.Class1"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32\1.0.0.0]
"CodeBase"="file:///C:/JavaScript + Libreria C Sharp/TestLib.dll"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\InprocServer32\1.0.0.0]
"RuntimeVersion"="v2.0.50727"
[HKEY_CLASSES_ROOT\CLSID\{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}\ProgId]
@="TestLib.Class"
[HKEY_CLASSES_ROOT\TestLib.Class]
@="TestLib.Class1"
[HKEY_CLASSES_ROOT\TestLib.Class\CLSID]
@="{134FC6AB-E594-4e5b-84F2-5CC612FF69D3}"

Eso lo guardan como InteroperabilidadCOM.reg lo ejecutan y luego de ejecutarlo se supone que debería funcionales en sus maquinas la DLL, ya que fue registrada.

Ojo:

"CodeBase"="file:///C:/JavaScript + Libreria C Sharp/TestLib.dll"

Deben cambiar C:/JavaScript + Libreria C Sharp/TestLib.dll por la ruta donde ustedes tengan la DLL.

Con esto se puede ampliar mucho mas la capacidad de sus aplicaciones porque ahora no es solamente javascript sino que tiene por debajo el poder y fortaleza de .NET y su gran cantidad de clases y librerías ademas de su rápido procesamiento.

Código de Fuente:

http://estebanfuentealba.net/ejemplos/JavaScript + Libreria C Sharp.rar

Espero que les sirva esto, es solo una idea xD

Saludos!

Certamen 2 DAI4501 [PHP/SESSION/JAVASCRIPT/CAPAS]

diciembre 7, 2009 2 comentarios

Acá dejo el último certamen de Desarrollo de Aplicaciones para Internet (DAI4501) de la profesora Yasna Meza

Enunciado:

Considerando la siguiente tabla de datos y su correspondiente diccionario de datos:

Se  pide  construir  una  aplicación  en  PHP  usando  capas  que  permita  cumplir  con  los
siguientes requerimientos:
R01 – Inicio y cierre de sesión
R02 – Agregar registros a la tabla de datos
R03 – Modificar registros de la tabla de datos
R04 – Listar todos los registros de la tabla
R05 –  Listar  usando  como  criterio  de  búsqueda  un  rango  de  sueldo.  El  sueldo  del profesor se calcula de acuerdo a la siguiente fórmula:
SUELDO = NÚMERO HORAS * VALOR HORA
OBSERVACIONES
·  DEBERÁ tener en consideración todas las validaciones
·  La base de datos DEBERÁ llamarse C2

Codigo de Fuente:
http://estebanfuentealba.net/archive/Certamen2-DAI-Esteban-Fuentealba.rar

Saludos!

Laboratorio JavaScript PHP II [DAI4501]

Segunda parte del laboratorio de DAI

Enunciado:

Continuando con el ejercicio del laboratorio anterior se pide que
usted modifique su aplicación, generando una versión 2.0, de forma
de considerar los siguientes nuevos requerimientos:
R01 – Agregar un ID a cada empleado, ID que NO PODRÁ repetirse
entre el grupo de empleados.
R02 – Cuando se registra un nuevo empleado deberá aparecer un
indicador del total de empleados que ya están registrados.
R03 – Manejar el departamento (nombre) al cual pertenece el
empleado
R04 – Obtener un informe, por departamento, con el total de
sueldos líquidos a pagar en cada departamento.
R05 – Obtener un informe, por departamento, que responda al
siguiente esquema:
——————————–
| EMPLEADOS |
——————————————————————
| DEPARTAMENTO |TOTAL EMPLEADOS | MAYOR SUELDO | MENOR SUELDO |
——————————————————————
| XXXXXXXXXXXXX | 999 | XXXXXXXXXXXX | XXXXXXXXXXXXX |
——————————————————————
TOTAL DEPARTAMENTOS

Resolución:

<?PHP
#
#	Empleado
#
class Empleado {
	var $nombre 	='';
	var $rut		='';
	var $sueldoBase	= 0;
	var $descuentos = null;
	var $departamento= null;
	public function __construct($rut,$nom,$sueldo,$dept) {
		if($dept != "-1") {
			$this->departamento = $dept;
		}
		if(strlen($rut) > 10 && strlen($rut) < 5)
			throw new Exception("El Rut del Empleado Esta Mal Ingresado");
		$this->rut = $rut;
		if(strlen($nom) < 1)
			throw new Exception("El Nombre del Empleado Debe tener mas de 1 caracter");
		$this->nombre = $nom;
		if($sueldo < 1)
			throw new Exception("El Sueldo del Empleado Debe ser mayor a 0");
		$this->sueldoBase = $sueldo;
		$this->descuentos = new Descuentos();
	}
	public function getSueldoLiquido() {
		#SUELDO_LIQUIDO = SUELDO_BASE – DESCUENTOS_LEGALES – DESCUENTOS_INTERNOS
		return ($this->sueldoBase - ((is_object($this->descuentos->descuentoLegal)) ? $this->descuentos->descuentoLegal->getDescuento($this->sueldoBase) : $this->descuentos->descuentoLegal) - ((is_object($this->descuentos->descuentoInterno)) ? $this->descuentos->descuentoInterno->getDescuento($this->sueldoBase) : $this->descuentos->descuentoInterno));
	}
}

class Descuentos {
	var $descuentoLegal = 0;
	var $descuentoInterno = 0;
}
class DescuentoLegal {
	var $afp 	= 0;
	var $salud	= 0;
	//var $seguro	=	0;
	public function __construct($afp=null,$salud=null) {
		$this->afp 		= $afp;
		$this->salud 	= $salud;
	}
	public function getDescuento($sueldo) {
		return (((is_object($this->afp)) ? $this->afp->getDescuento($sueldo) : $this->afp) + ((is_object( $this->salud)) ?  $this->salud->getDescuento($sueldo) :  $this->salud));
	}
}
class DescuentoInterno {
	var $sindicato 	= 0;
	var $cuotas		= 0;
	public function __construct($sin=null,$cuo=null) {
		$this->sindicato 		= $sin;
		$this->cuotas 			= $cuo;
	}
	public function getDescuento($sueldo) {
		if($this->sindicato != null) {
			return (($sueldo * $this->sindicato) / 100);
		} else if($this->cuotas != null) {
			return $this->cuotas;
		}
		return 0;
	}
}
class AFP {
	var $porcentaje	= 12.9;
	var $seguro		= 0;
	public function __construct($seguro=0) {
		$this->seguro = $seguro;
	}
	public function getDescuento($sueldo) {
		if($sueldo > 0) {
				return	(($sueldo * $this->porcentaje) /100) + $this->seguro;
		}
		return 0;
	}
}
#
#	Salud
#
class Isapre {
	var $valor_plan	= 0;
	var $valor_uf	= 0;
	public function __construct($vp=0,$vu=0) {
		$this->valor_plan 	= $vp;
		$this->valor_uf 	= $vu;
	}
	public function getDescuento($sueldo) {
		return ($this->valor_plan * $this->valor_uf);
	}
}
class Fonasa {
	var $porcentaje	= 7;
	public function getDescuento($sueldo) {
		if($sueldo > 0) {
				return	(($sueldo * $this->porcentaje) /100);
		}
		return 0;
	}
}



	$listaOrdenada = null;
	
	if (isset($_POST['listaDepartamentos'])){
		$listaDepartamentos = unserialize($_POST["listaDepartamentos"]);
	}
	else{
		$listaDepartamentos=array();
	}
	
	if (isset($_POST['listaEmpleados'])){
		$lista = unserialize($_POST["listaEmpleados"]);
	}
	else{
		$lista=array();
	}
	
	
	#
	#	Agregar Departamento
	#
	if(isset($_POST['addDepto'])) {
		try {
			$depto  = $_POST['n_dept_0'];
			if(strlen($depto) < 1)
				throw new Exception("El Nombre del Departamento debe ser mayor a 1 caracter");
			foreach($listaDepartamentos as $dept) {
				if($dept == $depto)
					throw new Exception("El Departamento Ya Existe");
			}
			$listaDepartamentos[] = $depto;	
		} catch(Exception $e) {
			echo 'ERROR: '. $e->getMessage();
		}
	}
	#
	#	Agregar Empleado
	#
	if(isset($_POST['enviar'])) {
		try {
			/*
				Datos Empleado
			*/
			$nombre = $_POST['nombre'];
			$rut 	= $_POST['rut'];
			$dv 	= $_POST['dv'];
			$sueldo = $_POST['sueldoBase'];
			$depto 	= $_POST['depto'];
			foreach($lista as $empleado) {
				if($empleado->rut == ($rut.'-'.$dv)) {
					throw new Exception("El Empleado Ya existe");
				}
			}
			$nuevo_empleado = new Empleado($rut.'-'.$dv,$nombre,$sueldo,$depto);
			/*
				Datos Descuentos Legales
			*/
			$nuevo_empleado->descuentos->descuentoLegal = new DescuentoLegal(null,null);
			$nuevo_empleado->descuentos->descuentoInterno = new DescuentoInterno(null,null);
			if(isset($_POST['chk_afp'])) {
				//12.9% del sueldo
				$nuevo_empleado->descuentos->descuentoLegal->afp = new AFP(0);
				if(isset($_POST['chk_seguro'])) {
					$valor_adicional	= $_POST['valor_seguro'];
					//12.9% del sueldo + $valor_adicional
					$nuevo_empleado->descuentos->descuentoLegal->afp->seguro = $valor_adicional;
				}
			} 

			$desc_salud	= $_POST['salud'];
			if($desc_salud == 1) {
				//Isapre
				$monto_uf 	= $_POST['monto_uf'];
				$valor_plan	= $_POST['valor_plan'];
				$nuevo_empleado->descuentos->descuentoLegal->salud = new Isapre($valor_plan,$monto_uf);
			} else if($desc_salud == 0) {
				//FONASA, Descuento del 7% del sueldo
				$nuevo_empleado->descuentos->descuentoLegal->salud = new Fonasa();
			}

			$desc_interno	= $_POST['group1'];
			if($desc_interno == "1") {
				$desc_internos	= $_POST['internos'];
				if($desc_internos == 0) {
					//Sindicato
					$perc_descuento = $_POST['per_desc'];
					echo $perc_descuento;
					$nuevo_empleado->descuentos->descuentoInterno->sindicato = $perc_descuento;
				} else if($desc_internos == 1) {
					//Cuotas
					$valor_cuota = $_POST['val_cuota'];
					$nuevo_empleado->descuentos->descuentoInterno->cuotas = $valor_cuota;
				}
			} else {
				//Sin descuentos internos
			}
			$lista[] = $nuevo_empleado;	
		} catch(Exception $e) {
			echo 'ERROR: '. $e->getMessage();
		}
	}
	if(isset($_POST['informeA'])) {
		$listaOrdenada = getEmpleadosByDepartamentos($listaDepartamentos,$lista);
	}

	function getEmpleadosByDepartamentos($listaDepartamentos,$lista) {
		foreach($listaDepartamentos as $departamento) {
			foreach($lista as $empleado) {
				
				if($departamento == $empleado->departamento) {
					$listaOrdenada[$departamento][$empleado->rut] = $empleado;
				}
			}
		}
		return $listaOrdenada;
	}
	function objSort(&$objArray,$sort_flags=0) {
		$indices = array();
		foreach($objArray as $obj) {
			$indeces[] = $obj->getSueldoLiquido();
		}
		return array_multisort($indeces,$objArray,$sort_flags);
	}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Laboratorio JS-PHP Parte II</title>
        <style type="text/css">
		.error {
			background-color: #FFEBE8;
			border-color: #CC0000;
		}
		html {
			font-size:13px;
		}
		h1 {
			font-size:13px;
			font-weight:bold;
		}
		input {
			-moz-background-clip:border;
			-moz-background-inline-policy:continuous;
			-moz-background-origin:padding;
			background:#FBFBFB none repeat scroll 0 0;
			border:1px solid #E5E5E5;
			font-size:13px;
			margin-right:6px;
			padding:3px;
		}
		table.empleados {
			width: 580px;
			background-color: #fafafa;
			border: 1px #000000 solid;
			border-collapse: collapse;
			border-spacing: 0px;
		}
		table thead {
			background-color: #99CCCC;
			border: 1px #000000 solid;
			font-family: Verdana;
			font-weight: bold;
			font-size: 12px;
			color: #404040;
		}
		table td {
			border-bottom: 1px #6699CC dotted;
			text-align: left;
			font-family: Verdana, sans-serif, Arial;
			font-weight: normal;
			font-size: .7em;
			color: #404040;
			background-color: #fafafa;
			padding-top: 4px;
			padding-bottom: 4px;
			text-align: center;
		}
		</style>
		<script type="text/javascript">
			function showHide(obj) {
				if(document.getElementById(obj).style.display == 'none') { mostrar(obj); }
				else { ocultar(obj); }
			}
			function mostrar(obj) { document.getElementById(obj).style.display = 'block'; }
			function ocultar(obj) {
				document.getElementById(obj).style.display = 'none';
				document.getElementById(obj).value = '';
			}
			function crearElemento(prop) {
				elem = document.createElement(prop.elemento);
				for (var key in prop.atributos) { eval("elem."+key+" = '"+prop.atributos[key]+"';"); }
				return elem;
			}
			function isLegal(obj) {
				if(document.getElementById(obj).innerHTML.length == 0) {
					p = crearElemento({elemento: 'p',atributos: { innerHTML: '% de Descuento Adicional: '}});
					input = crearElemento({elemento: 'input',atributos: { type: 'text',name: 'valor_seguro',id: 'valor_seguro',size: 2, maxlength: 3 }});
					input.onkeypress = 	function(e) { return isNumberKey((window.event || e),'46'); };
					p.appendChild(input);
					document.getElementById(obj).appendChild(p);
				} else {
					document.getElementById(obj).innerHTML = '';
				}
			}
			function isIsapre(numero) {
				if(numero == 1) {
					p = crearElemento({elemento: 'p',atributos: { innerHTML: 'Monto de la UF: '}});
					input = crearElemento({elemento: 'input',atributos: { type: 'text',name: 'monto_uf',id: 'monto_uf'}});
					input.onkeypress = 	function(e) { return isNumberKey((window.event || e),null); };
					p.appendChild(input);
					document.getElementById('valor_isapre').appendChild(p);

					p = crearElemento({elemento: 'p',atributos: { innerHTML: 'Valor en UF del plan: '}});
					input = crearElemento({elemento: 'input',atributos: { type: 'text',name: 'valor_plan',id: 'valor_plan'}});
					input.onkeypress = 	function(e) { return isNumberKey((window.event || e),null) ; };
					p.appendChild(input);
					document.getElementById('valor_isapre').appendChild(p);
				} else {
					document.getElementById('valor_isapre').innerHTML = '';
				}
			}
			function isNumberKey(evt,chr) {
				var charCode = (evt.which) ? evt.which : event.keyCode;
				if(chr != null) { if(charCode == chr) return true; }
				if (charCode > 31 && (charCode < 48 || charCode > 57)) return false;
				return true;
			}
			function isDescuentoAdicional(numero) {
				document.getElementById('internos').innerHTML = '';
				if(numero == 1) {
					select = crearElemento({elemento: 'select',atributos: { name: 'internos',id: 'internos'}});
					option = crearElemento({elemento: 'option',atributos: { value: '-1',innerHTML: 'Selecciona el Descuento Adicional'}});
					select.appendChild(option);
					option = crearElemento({elemento: 'option',atributos: { value: '0',innerHTML: 'Sindicato'}});
					select.appendChild(option);
					option = crearElemento({elemento: 'option',atributos: { value: '1',innerHTML: 'Cuotas'}});
					select.appendChild(option);
					document.getElementById('internos').appendChild(select);
					div = crearElemento({elemento: 'div',atributos: { id: 'valoresAdicionales'}});
					document.getElementById('internos').appendChild(div);
					select.onchange = 	function(){
										document.getElementById('valoresAdicionales').innerHTML = '';
											switch(this.value) {
												case ('0' || 0) :
													p = crearElemento({elemento: 'p',atributos: { innerHTML: 'Porcentaje de Descuento: '}});
													input = crearElemento({elemento: 'input',atributos: { type: 'text',name: 'per_desc',id: 'per_desc'}});
													input.onkeypress = 	function(e) { return isNumberKey((window.event || e),'46'); };
													p.appendChild(input);
													document.getElementById('valoresAdicionales').appendChild(p);
													break;
												case ('1' || 1) :
													p = crearElemento({elemento: 'p',atributos: { innerHTML: 'Valor Cuota: $'}});
													input = crearElemento({elemento: 'input',atributos: { type: 'text',name: 'val_cuota',id: 'val_cuota'}});
													input.onkeypress = 	function(e) { return isNumberKey((window.event || e),null); };
													p.appendChild(input);
													document.getElementById('valoresAdicionales').appendChild(p);
													break;
											}
										};
				} else {
					document.getElementById('internos').innerHTML = '';
				}
			}
			function validarRut(numero,dv) {
				if(!isNaN(numero) || numero.length == 0 || numero.length > 8 )  {
					return false;
				} else {
					if(getDV(numero) == dv) return true;
				}
				return false;
			}
			function getDV(numero) {
				nuevo_numero = numero.toString().split("").reverse().join("");
				for(i=0,j=2,suma=0; i < nuevo_numero.length; i++, ((j==7) ? j=2 : j++)) {
					suma += (parseInt(nuevo_numero.charAt(i)) * j);
				}
				n_dv = 11 - (suma % 11);
				return ((n_dv == 11) ? 0 : ((n_dv == 10) ? "K" : n_dv));
			}
			function isVacio(q) {
				for ( i = 0; i < q.length; i++ ) {
					if (q.charAt(i) != " ") return false;
				}
				return true;
			}
			function isNumeric(valor) {
				return (isNaN(valor)) ? false : true;
			}
			function cleanClass(form) {
				for(i=0; i <form.length; i++) { form[i].className = ""; }
			}
			function validarTodo(form) {
				cleanClass(form);
				var malos = new Array();
				j=0;
				var inputs = form.getElementsByTagName("input");
				for(i=0; i < inputs.length; i++) {
					if(inputs[i].type == "text") { if(inputs[i].value.length == 0) { malos[j++] = inputs[i].id; } }
				}
				var selects = form.getElementsByTagName("select");
				for(i=0; i < selects.length; i++) {
					if(selects[i].value == "-1") { malos[j++] = selects[i].id; }
				}
				return ((malos.length > 0) ? malos : true);
			}
			function send(obj) {
				isValid = validarTodo(obj);
				if(isValid == true) {
					return true;
				} else {
					for(i=0; i < isValid.length; i++) { eval("obj."+isValid[i]+".className='error';"); }
				}
				return false;
			}
			function enableSeguro(obj) {
				if(obj.checked) {
					document.getElementById('chk_seguro').disabled = false;
				} else {
					//Deshabilita
					document.getElementById('chk_seguro').disabled = true;
					document.getElementById('chk_seguro').checked = false;
					document.getElementById('descuento_legal').innerHTML = '';
				}
			}
			/*function addDeptos(o) {
				nuevoDepto = prompt('Introduce el nombre del Departamento','[ nombre del departamento ]');
				option = option = crearElemento({elemento: 'option',atributos: { value: nuevoDepto,innerHTML: nuevoDepto}});
				document.getElementById('nuevoDepto').value = nuevoDepto;
			}*/

        </script>
    </head>
    <body>
		<div style="float: left; width: 300px;">
			
			<form id="formularioAgregarDepto" name="formularioAgregarDepto" method="POST">
				<?php
					# Guarda la lista en un campo 'oculto'
					echo "<input name='listaDepartamentos' type='hidden' value='" . serialize($listaDepartamentos) . "'/>";
					echo "<input name='listaEmpleados' type='hidden' value='" . serialize($lista) . "'/>";
				?>
				<div id="departamentos">
					<h1>Agrega Departamento</h1>
					<input id="n_dept_0" name='n_dept_0' type='text' />
					<input type="submit" id="addDepto" name="addDepto" value="+" />
				</div>
			</form>
			<br />
			<br />
			<h1>Ingresar Empleados</h1>
			<form id="formularioAgregar" method="POST" onsubmit="return send(this);">
				<?php
					# Guarda la lista en un campo 'oculto'
					echo "<input name='listaDepartamentos' type='hidden' value='" . serialize($listaDepartamentos) . "'/>";
					echo "<input name='listaEmpleados' type='hidden' value='" . serialize($lista) . "'/>";
				?>
				Rut: <input type="text" id="rut" name="rut" onkeypress="return isNumberKey(event,null);" maxlength="8" size="8" />-<input type="text" name="dv" id="dv" size="1" maxlength="1"/><br />
				Nombre: <input type="text" id="nombre" name="nombre" /><br />
				Sueldo Base: $<input type="text" id="sueldoBase" name="sueldoBase" onkeypress="return isNumberKey(event,null);" /><br />
				<h1>Descuentos Legales</h1>
				<input type="checkbox" id="chk_afp" name="chk_afp" onclick="enableSeguro(this);">AFP<br />
				<input type="checkbox" id="chk_seguro" name="chk_seguro" onclick="isLegal('descuento_legal');"  disabled/>Seguro
				<div id="descuento_legal"></div>
				<div id="descuento_salud">
					<h1>Descuentos de Salud</h1>
					<select id="salud" name="salud" onchange="isIsapre(this.value);">
						<option value="-1">Selecciona el Descuento de Salud</option>
						<option value="2">Sin Prevision</option>
						<option value="0">Fonasa</option>
						<option value="1">Isapre</option>
					</select>
					<br />
					<div id="valor_isapre"></div>
				</div>
				<div id="descuento_interno">
					<h1>Descuentos Internos</h1>
					<input type="radio" name="group1" value="1" onclick="isDescuentoAdicional(this.value);"> Si<br>
					<input type="radio" name="group1" value="0" onclick="isDescuentoAdicional(this.value);" checked> No<br>
					<div id="internos"></div>
				</div>
				<div id="departamentos">
					<h1>Departamento</h1>
					<select id="depto" name="depto">
						<option value="-1">Selecciona el Departamento</option>
						<?PHP
							foreach($listaDepartamentos as $departamento) {
								echo '<option value="'.$departamento.'">'.$departamento.'</option>';
							}
						?>	
					</select>
				</div>
				<input type="submit" id="enviar" name="enviar" value="Agregar" />
			</form>
			<form method="POST">
				<?php
					# Guarda la lista en un campo 'oculto'
					echo "<input name='listaDepartamentos' type='hidden' value='" . serialize($listaDepartamentos) . "'/>";
					echo "<input name='listaEmpleados' type='hidden' value='" . serialize($lista) . "'/>";
				?>
				<input type="submit" id="informeA" name="informeA" value="Informes" />
			</form>
		</div>
		<div id="contenido" style="float: left;">
			<h1>Total Empleados: <?PHP echo count($lista); ?></h1>
			<?PHP
			if(count($lista) > 0) {
				echo '<table class="empleados" cellspacing="0"><thead><tr><th>Rut</th><th>Nombre</th><th>Sueldo Base</th><th>Sueldo Liquido</th><th>Departamento</th></tr></thead><tbody>';
				for($i=count($lista)-1; $i >= 0; $i--) {
					echo '<tr><td>'.$lista[$i]->rut.'</td><td>'.$lista[$i]->nombre.'</td><td>'.$lista[$i]->sueldoBase.'</td><td>'.$lista[$i]->getSueldoLiquido().'</td><td>'.(($lista[$i]->departamento != null) ? $lista[$i]->departamento : "Sin Depto").'</td></tr>';
				}
				echo '</tbody></table>';
			}
			if(count($listaDepartamentos ) > 0 && count($listaOrdenada) > 0) {
				foreach($listaOrdenada as $k => $v) {
					$sueldos[$k] = '';
					foreach($v as $empleado) {
						$sueldos[$k] += $empleado->getSueldoLiquido();
					}
				}
				foreach($sueldos as $k => $sueldo) {
					echo 'Departamento: <b>'.$k.'</b> Sueldos a Pagar: <b>$'.$sueldo.'</b><br />';
				}
				
				echo '<table class="empleados" cellspacing="0"><thead><tr><th> </th><th> </th><th>Empleados: <b>'.count($lista).'</b></th><th> </th></tr></thead><tbody>';
				$empByDepto = array();
				echo '<tr><td>Departamento</td><td>Total Empleados</td><td>Mayor Sueldo</td><td>Menor Sueldo</td></tr>';
				foreach($listaOrdenada as $k => $v) {
					$sueldos[$k] = '';
					$empleados=array();
					foreach($v as $empleado) {
						$sueldos[$k] += $empleado->getSueldoLiquido();
						$empleados[] = $empleado;
					}
					objSort($empleados);
					echo '<tr><td>'.$k.'</td><td>'.count($empleados).'</td><td>'.$empleados[count($empleados)-1]->getSueldoLiquido().'</td><td>'.$empleados[0]->getSueldoLiquido().'</td></tr>';
				}
				echo '<tr><td>Total Departamentos: '.count($listaDepartamentos).'</td></tr>';
				echo '</tbody></table>';
			}
			?>
		</div>
		
		
    </body>
</html>

Saludos!.

Laboratorio JavaScript + PHP [DAI4501]

septiembre 26, 2009 4 comentarios

Este es el laboratorio de Desarollo de Aplicaciones para Internet

Enunciado:

ACTIVIDAD 1DESCRIPCIÓN DEL PROBLEMA

Se desea manejar la información relacionada con los empleados, se
necesita calcular el sueldo líquido de cada empleado el que se
calcula de acuerdo a la siguiente fórmula:

SUELDO_LIQUIDO = SUELDO_BASE – DESCUENTOS_LEGALES – DESCUENTOS_INTERNOS

Los descuentos legales tienen relación con el descuento de salud y
AFP. El descuento por AFP siempre será de un 12.9%, sin embargo,
es posible que el empleado tenga asociado algún seguro y eso
implica un descuento adicional (que se debe agregar al 12.9%).

Por su parte, el descuento de salud tiene relación con el número
de UF asociado al valor del plan contratado por el empleado, esto
en caso de que se encuentre afiliado a una Isapre, en caso
contrario (FONASA) el descuento corresponde al 7%.

Finalmente, los descuentos internos pueden ser de dos tipos:

  • Descuento por sindicato
  • Descuento por pago de cuotas de préstamos

En el caso del descuento por sindicato se debe ingresar el
porcentaje de descuento y en el caso del pago de cuotas de
préstamo se debe ingresar el valor de la cuota.

Se debe llevar un registro de todos los sueldos calculados, para
luego mostrar en una tabla los nombres de los empleados y sus
sueldos.

OBSERVACIONES

  • NO todos los empleados tienen descuentos internos.
  • En caso de que el empleado esté afiliado a una isapre DEBERÁ solicitar el monto de la UF junto al valor en UF del plan.

CONSIDERACIONES

Se va a valorar el hecho de que su interfaz HTML ofrezca controles
del tipo RADIO BUTTON, CHECKBOX, COMBOBOX.

Las validaciones deben ser atendidas en JavaScript y la lógica de
la  aplicación  en  PHP  (usted  decide  si  va  a  trabajar  con  código
embebido o en archivos independientes).

<?PHP
#
#	Empleado
#
class Empleado {
	var $nombre 	='';
	var $rut		='';
	var $sueldoBase	= 0;
	var $descuentos = null;
	public function __construct($rut,$nom,$sueldo) {
		$this->rut = $rut;
		$this->nombre = $nom;
		$this->sueldoBase = $sueldo;
		$this->descuentos = new Descuentos();
	}
	public function getSueldoLiquido() {
		#SUELDO_LIQUIDO = SUELDO_BASE – DESCUENTOS_LEGALES – DESCUENTOS_INTERNOS
		return ($this->sueldoBase - ((is_object($this->descuentos->descuentoLegal)) ? $this->descuentos->descuentoLegal->getDescuento($this->sueldoBase) : $this->descuentos->descuentoLegal) - ((is_object($this->descuentos->descuentoInterno)) ? $this->descuentos->descuentoInterno->getDescuento($this->sueldoBase) : $this->descuentos->descuentoInterno));
	}
}

class Descuentos {
	var $descuentoLegal = 0;
	var $descuentoInterno = 0;
}
class DescuentoLegal {
	var $afp 	= 0;
	var $salud	= 0;
	//var $seguro	=	0;
	public function __construct($afp=null,$salud=null) {
		$this->afp 		= $afp;
		$this->salud 	= $salud;
	}
	public function getDescuento($sueldo) {
		return (((is_object($this->afp)) ? $this->afp->getDescuento($sueldo) : $this->afp) + ((is_object( $this->salud)) ?  $this->salud->getDescuento($sueldo) :  $this->salud));
	}
}
class DescuentoInterno {
	var $sindicato 	= 0;
	var $cuotas		= 0;
	public function __construct($sin=null,$cuo=null) {
		$this->sindicato 		= $sin;
		$this->cuotas 			= $cuo;
	}
	public function getDescuento($sueldo) {
		if($this->sindicato != null) {
			return (($sueldo * $this->sindicato) / 100);
		} else if($this->cuotas != null) {
			return $this->cuotas;
		}
		return 0;
	}
}
class AFP {
	var $porcentaje	= 12.9;
	var $seguro		= 0;
	public function __construct($seguro=0) {
		$this->seguro = $seguro;
	}
	public function getDescuento($sueldo) {
		if($sueldo > 0) {
				return	(($sueldo * $this->porcentaje) /100) + $this->seguro;
		}
		return 0;
	}
}
#
#	Salud
#
class Isapre {
	var $valor_plan	= 0;
	var $valor_uf	= 0;
	public function __construct($vp=0,$vu=0) {
		$this->valor_plan 	= $vp;
		$this->valor_uf 	= $vu;
	}
	public function getDescuento($sueldo) {
		return ($this->valor_plan * $this->valor_uf);
	}
}
class Fonasa {
	var $porcentaje	= 7;
	public function getDescuento($sueldo) {
		if($sueldo > 0) {
				return	(($sueldo * $this->porcentaje) /100);
		}
		return 0;
	}
}
	if (isset($_POST['listaEmpleados'])){
		$lista = unserialize($_POST["listaEmpleados"]);
	}
	else{
		$lista=array();
	}

	#
	#	Agregar Empleado
	#
	if(isset($_POST['enviar'])) {
		/*
			Datos Empleado
		*/
		$nombre = $_POST['nombre'];
		$rut 	= $_POST['rut'];
		$dv 	= $_POST['dv'];
		$sueldo = $_POST['sueldoBase'];
		$nuevo_empleado = new Empleado($rut.'-'.$dv,$nombre,$sueldo);
		/*
			Datos Descuentos Legales
		*/
		$nuevo_empleado->descuentos->descuentoLegal = new DescuentoLegal(null,null);
		$nuevo_empleado->descuentos->descuentoInterno = new DescuentoInterno(null,null);
		if(isset($_POST['chk_afp'])) {
			//12.9% del sueldo
			$nuevo_empleado->descuentos->descuentoLegal->afp = new AFP(0);
			if(isset($_POST['chk_seguro'])) {
				$valor_adicional	= $_POST['valor_seguro'];
				//12.9% del sueldo + $valor_adicional
				$nuevo_empleado->descuentos->descuentoLegal->afp->seguro = $valor_adicional;
			}
		} 

		$desc_salud	= $_POST['salud'];
		if($desc_salud == 1) {
			//Isapre
			$monto_uf 	= $_POST['monto_uf'];
			$valor_plan	= $_POST['valor_plan'];
			//$nuevo_empleado->descuentos->salud = new Isapre($valor_plan,$monto_uf);
			$nuevo_empleado->descuentos->descuentoLegal->salud = new Isapre($valor_plan,$monto_uf);
		} else if($desc_salud == 0) {
			//FONASA, Descuento del 7% del sueldo
			$nuevo_empleado->descuentos->descuentoLegal->salud = new Fonasa();
		}

		$desc_interno	= $_POST['group1'];
		if($desc_interno == "1") {
			$desc_internos	= $_POST['internos'];
			if($desc_internos == 0) {
				//Sindicato
				$perc_descuento = $_POST['per_desc'];
				echo $perc_descuento;
				$nuevo_empleado->descuentos->descuentoInterno->sindicato = $perc_descuento;
			} else if($desc_internos == 1) {
				//Cuotas
				$valor_cuota = $_POST['val_cuota'];
				$nuevo_empleado->descuentos->descuentoInterno->cuotas = $valor_cuota;
			}
		} else {
			//Sin descuentos internos
		}

		$lista[] = $nuevo_empleado;	

	}

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Laboratorio JS-PHP</title>
        <style type="text/css">
		.error {
			background-color: #FFEBE8;
			border-color: #CC0000;
		}
		html {
			font-size:13px;
		}
		h1 {
			font-size:13px;
			font-weight:bold;
		}
		input {
			-moz-background-clip:border;
			-moz-background-inline-policy:continuous;
			-moz-background-origin:padding;
			background:#FBFBFB none repeat scroll 0 0;
			border:1px solid #E5E5E5;
			font-size:13px;
			margin-right:6px;
			padding:3px;
		}
		table.empleados {
			width: 580px;
			background-color: #fafafa;
			border: 1px #000000 solid;
			border-collapse: collapse;
			border-spacing: 0px;
		}
		table thead {
			background-color: #99CCCC;
			border: 1px #000000 solid;
			font-family: Verdana;
			font-weight: bold;
			font-size: 12px;
			color: #404040;
		}
		table td {
			border-bottom: 1px #6699CC dotted;
			text-align: left;
			font-family: Verdana, sans-serif, Arial;
			font-weight: normal;
			font-size: .7em;
			color: #404040;
			background-color: #fafafa;
			padding-top: 4px;
			padding-bottom: 4px;
			text-align: center;
		}
		</style>
		<script type="text/javascript">
			function showHide(obj) {
				if(document.getElementById(obj).style.display == 'none') { mostrar(obj); }
				else { ocultar(obj); }
			}
			function mostrar(obj) { document.getElementById(obj).style.display = 'block'; }
			function ocultar(obj) {
				document.getElementById(obj).style.display = 'none';
				document.getElementById(obj).value = '';
			}
			function crearElemento(prop) {
				elem = document.createElement(prop.elemento);
				for (var key in prop.atributos) { eval("elem."+key+" = '"+prop.atributos[key]+"';"); }
				return elem;
			}
			function isLegal(obj) {
				if(document.getElementById(obj).innerHTML.length == 0) {
					p = crearElemento({elemento: 'p',atributos: { innerHTML: '% de Descuento Adicional: '}});
					input = crearElemento({elemento: 'input',atributos: { type: 'text',name: 'valor_seguro',id: 'valor_seguro',size: 2, maxlength: 3 }});
					input.onkeypress = 	function(e) { return isNumberKey((window.event || e),'46'); };
					p.appendChild(input);
					document.getElementById(obj).appendChild(p);
				} else {
					document.getElementById(obj).innerHTML = '';
				}
			}
			function isIsapre(numero) {
				if(numero == 1) {
					p = crearElemento({elemento: 'p',atributos: { innerHTML: 'Monto de la UF: '}});
					input = crearElemento({elemento: 'input',atributos: { type: 'text',name: 'monto_uf',id: 'monto_uf'}});
					input.onkeypress = 	function(e) { return isNumberKey((window.event || e),null); };
					p.appendChild(input);
					document.getElementById('valor_isapre').appendChild(p);

					p = crearElemento({elemento: 'p',atributos: { innerHTML: 'Valor en UF del plan: '}});
					input = crearElemento({elemento: 'input',atributos: { type: 'text',name: 'valor_plan',id: 'valor_plan'}});
					input.onkeypress = 	function(e) { return isNumberKey((window.event || e),null) ; };
					p.appendChild(input);
					document.getElementById('valor_isapre').appendChild(p);
				} else {
					document.getElementById('valor_isapre').innerHTML = '';
				}
			}
			function isNumberKey(evt,chr) {
				var charCode = (evt.which) ? evt.which : event.keyCode;
				if(chr != null) { if(charCode == chr) return true; }
				if (charCode > 31 && (charCode < 48 || charCode > 57)) return false;
				return true;
			}
			function isDescuentoAdicional(numero) {
				document.getElementById('internos').innerHTML = '';
				if(numero == 1) {
					select = crearElemento({elemento: 'select',atributos: { name: 'internos',id: 'internos'}});
					option = crearElemento({elemento: 'option',atributos: { value: '-1',innerHTML: 'Selecciona el Descuento Adicional'}});
					select.appendChild(option);
					option = crearElemento({elemento: 'option',atributos: { value: '0',innerHTML: 'Sindicato'}});
					select.appendChild(option);
					option = crearElemento({elemento: 'option',atributos: { value: '1',innerHTML: 'Cuotas'}});
					select.appendChild(option);
					document.getElementById('internos').appendChild(select);
					div = crearElemento({elemento: 'div',atributos: { id: 'valoresAdicionales'}});
					document.getElementById('internos').appendChild(div);
					select.onchange = 	function(){
										document.getElementById('valoresAdicionales').innerHTML = '';
											switch(this.value) {
												case ('0' || 0) :
													p = crearElemento({elemento: 'p',atributos: { innerHTML: 'Porcentaje de Descuento: '}});
													input = crearElemento({elemento: 'input',atributos: { type: 'text',name: 'per_desc',id: 'per_desc'}});
													input.onkeypress = 	function(e) { return isNumberKey((window.event || e),'46'); };
													p.appendChild(input);
													document.getElementById('valoresAdicionales').appendChild(p);
													break;
												case ('1' || 1) :
													p = crearElemento({elemento: 'p',atributos: { innerHTML: 'Valor Cuota: $'}});
													input = crearElemento({elemento: 'input',atributos: { type: 'text',name: 'val_cuota',id: 'val_cuota'}});
													input.onkeypress = 	function(e) { return isNumberKey((window.event || e),null); };
													p.appendChild(input);
													document.getElementById('valoresAdicionales').appendChild(p);
													break;
											}
										};
				} else {
					document.getElementById('internos').innerHTML = '';
				}
			}
			function validarRut(numero,dv) {
				if(!isNaN(numero) || numero.length == 0 || numero.length > 8 )  {
					return false;
				} else {
					if(getDV(numero) == dv) return true;
				}
				return false;
			}
			function getDV(numero) {
				nuevo_numero = numero.toString().split("").reverse().join("");
				for(i=0,j=2,suma=0; i < nuevo_numero.length; i++, ((j==7) ? j=2 : j++)) {
					suma += (parseInt(nuevo_numero.charAt(i)) * j);
				}
				n_dv = 11 - (suma % 11);
				return ((n_dv == 11) ? 0 : ((n_dv == 10) ? "K" : n_dv));
			}
			function isVacio(q) {
				for ( i = 0; i < q.length; i++ ) {
					if (q.charAt(i) != " ") return false;
				}
				return true;
			}
			function isNumeric(valor) {
				return (isNaN(valor)) ? false : true;
			}
			function cleanClass(form) {
				for(i=0; i <form.length; i++) { form[i].className = ""; }
			}
			function validarTodo(form) {
				cleanClass(form);
				var malos = new Array();
				j=0;
				var inputs = form.getElementsByTagName("input");
				for(i=0; i < inputs.length; i++) {
					if(inputs[i].type == "text") { if(inputs[i].value.length == 0) { malos[j++] = inputs[i].id; } }
				}
				var selects = form.getElementsByTagName("select");
				for(i=0; i < selects.length; i++) {
					if(selects[i].value == "-1") { malos[j++] = selects[i].id; }
				}
				return ((malos.length > 0) ? malos : true);
			}
			function send(obj) {
				isValid = validarTodo(obj);
				if(isValid == true) {
					return true;
				} else {
					for(i=0; i < isValid.length; i++) { eval("obj."+isValid[i]+".className='error';"); }
				}
				return false;
			}
			function enableSeguro(obj) {
				if(obj.checked) {
					document.getElementById('chk_seguro').disabled = false;
				} else {
					//Deshabilita
					document.getElementById('chk_seguro').disabled = true;
					document.getElementById('chk_seguro').checked = false;
					document.getElementById('descuento_legal').innerHTML = '';
				}
			}
        </script>
    </head>
    <body>
		<div style="float: left; width: 300px;">
			<h1>Ingresar Empleados</h1>
			<form id="formularioAgregar" method="POST" onsubmit="return send(this);">
				<?php
					# Guarda la lista en un campo 'oculto'
					echo "<input name='listaEmpleados' type='hidden' value='" . serialize($lista) . "'/>";
				?>
				Rut: <input type="text" id="rut" name="rut" onkeypress="return isNumberKey(event,null);" maxlength="8" size="8" />-<input type="text" name="dv" id="dv" size="1" maxlength="1"/><br />
				Nombre: <input type="text" id="nombre" name="nombre" /><br />
				Sueldo Base: $<input type="text" id="sueldoBase" name="sueldoBase" onkeypress="return isNumberKey(event,null);" /><br />
				<h1>Descuentos Legales</h1>
				<input type="checkbox" id="chk_afp" name="chk_afp" onclick="enableSeguro(this);">AFP<br />
				<input type="checkbox" id="chk_seguro" name="chk_seguro" onclick="isLegal('descuento_legal');"  disabled/>Seguro
				<div id="descuento_legal"></div>
				<div id="descuento_salud">
					<h1>Descuentos de Salud</h1>
					<select id="salud" name="salud" onchange="isIsapre(this.value);">
						<option value="-1">Selecciona el Descuento de Salud</option>
						<option value="2">Sin Prevision</option>
						<option value="0">Fonasa</option>
						<option value="1">Isapre</option>
					</select>
					<br />
					<div id="valor_isapre"></div>
				</div>
				<div id="descuento_interno">
					<h1>Descuentos Internos</h1>
					<input type="radio" name="group1" value="1" onclick="isDescuentoAdicional(this.value);"> Si<br>
					<input type="radio" name="group1" value="0" onclick="isDescuentoAdicional(this.value);" checked> No<br>
					<div id="internos"></div>
				</div>
				<input type="submit" id="enviar" name="enviar" value="Agregar" />
			</form>
		</div>
		<div id="contenido" style="float: left;">
			<h1>Total Empleados: <?PHP echo count($lista); ?></h1>
			<?PHP
			if(count($lista) > 0) {
				echo '<table class="empleados" cellspacing="0"><thead><tr><th>Rut</th><th>Nombre</th><th>Sueldo Base</th><th>Sueldo Liquido</th></tr></thead><tbody>';
				for($i=count($lista)-1; $i >= 0; $i--) {
					echo '<tr><td>'.$lista[$i]->rut.'</td><td>'.$lista[$i]->nombre.'</td><td>'.$lista[$i]->sueldoBase.'</td><td>'.$lista[$i]->getSueldoLiquido().'</td></tr>';
				}
				echo '</tbody></table>';
			}
			?>
		</div>
    </body>
</html>

Comprobar Rut (Digito Verificador) JavaScript

septiembre 25, 2009 6 comentarios
Todos los chilenos o residentes permanente de esta larga y angosta faja de tierra poseemos un número identificatorio único e irrepetible, el llamado Rol Único Tributario o RUT, la entidad estatal responsable de la generación, mantención y actualización del dichoso RUT es el Servicio de Impuestos Internos (SII).
Ahora bien, para asegurar la correcta manipulación del RUT (ya sea verbal o visual) se le añade o agrega un dígito verificador (DV) al final del mismo. ¿Cómo se obtiene el DV?, aplicando una formula aritmética llamada Módulo 11 al RUT. Existen otras alternativas para obtener el DV pero en Chile se usa el Módulo 11.
Así entonces, para verificar que un rut es correcto se debe aplicar el algoritmo del módulo 11 al número (lo que va antes del guión). Por lo tanto, si el resultado de la operación anterior coincide con el Dígito Verificador (DV) el rut es válido.
¿Se entendió?, no importa con el ejemplo se entenderá, eso espero. Antes de ir al ejemplo debo decir que el DV tiene tres (3) reglas fundamentales.
El Dígito Verificador es:
  • igual al resultado si éste está entre 1 y 9
  • K si el resultado es 10 y
  • 0 si el resultado es 11.

Ejemplo de aplicación del Módulo 11

  1. Dado el RUT 12 345 678-5. Llamaremos Número a 12 345 678 y Digito Verificador (DV) a 5
  2. Tomaremos la serie numérica: 2, 3, 4, 5, 6, 7.
  3. Se multiplicará cada dígito del Número por su correspondiente en la serie numérica, la multiplicación la hacemos de derecha a izquierda, si el Número es más largo que la serie se vuelve a comenzar en 2.
  4. Multiplicando
    • 8 x 2 = 16
    • 7 x 3 = 21
    • 6 x 4 = 24
    • 5 x 5 = 25
    • 4 x 6 = 24
    • 3 x 7 = 21
    • 2 x 2 = 4
    • 1 x 3 = 3
  5. La suma de cada multiplicación es: 16+21+24+25+24+21+4+3 = 138
  6. El siguiente paso es dividir este resultado en 11 (por esto se llaman módulo 11). Sólo se toma en cuenta el cuociente entero.
  7. 138 / 11 = 12 el resto es 6. ¿Dudas?, comprobemos la división (11 x 12) + 6 = 132 + 6 = 138, ¡perfecto!.
  8. Ahora sólo nos queda restar el resto (6) a 11, lo cual es: 11 – 6 = 5
  9. El resultado es 5
  10. La primera regla del módulo 11 dice que es el mismo número si éste está en el rango 1-9 entonces el Digito Verificador del Número: 12 345 678 es 5, en consecuencia el RUT dado al inicio del ejemplo es CORRECTO.

Segundo Ejemplo

Ahora lo haremos un poco más rápido: Comprobar si es correcto el RUT: 4 299 006-K.
  • 6 x 2 = 12
  • 0 x 3 = 0
  • 0 x 4 = 0
  • 9 x 5 = 45 + 12 = 57
  • 9 x 6 = 54 + 57 = 111
  • 2 x 7 = 14 + 111 = 125
  • 4 x 2 = 8 + 125 = 133
  • 133 / 11 = 12 resto 1
  • 11 – 1 = 10
  • La segunda regla dice: K si el resultado es 10, en consecuencia el RUT 4 299 006-K es correcto.

Ahora viene la parte del codigo, este codigo lo hice en javascript consta de dos funciones, una obtiene el digito verificador y otra comprueba que el rut ingresado sea corecto.

function validarRut(numero,dv) {
				if(!isNaN(numero) || numero.length == 0 || numero.length > 8 ) {
					return false;
				} else {
					if(getDV(numero) == dv) return true;
				}
				return false;
			}
			function getDV(numero) {
				nuevo_numero = numero.toString().split("").reverse().join("");
				for(i=0,j=2,suma=0; i < nuevo_numero.length; i++, ((j==7) ? j=2 : j++)) {
					suma += (parseInt(nuevo_numero.charAt(i)) * j);	
				}
				n_dv = 11 - (suma % 11);
				return ((n_dv == 11) ? 0 : ((n_dv == 10) ? "K" : n_dv));
			}

Saludos!

Laboratorio Inicio DAI4501 JavaScript

septiembre 23, 2009 1 comentario

Laboratorio JavaScript.

ACTIVIDAD 1 USO DE FUNCIÓN isNaN

Construir una página HTML que contenga una entrada del tipo TEXT y
una del tipo SUBMIT que permita determinar si el valor que se ha
ingresado es un valor numérico.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Laboratorio JavaScript 01</title>
        <script type="text/javascript">
			function isVacio(q) {  
				for ( i = 0; i < q.length; i++ ) {  
					if (q.charAt(i) != " ") return false;  
				}  
				return true;  
			}  
			function isNumeric(valor) {
				return (isNaN(valor)) ? false : true;
			}
			function valida(valor) {
				if(isVacio(valor)) {
					alert('Ingresa un Valor');
					return false;
				}
				if(isNumeric(valor)) { alert('Es Numero'); } 
				else { alert('No es Numero¡'); }
				return false;
			}
        </script>
    </head>
    <body>
        <form id="formulario" onsubmit="return valida(this.miCadena.value)">
			<input type="text" id="miCadena" /> 
			<input type="submit" id="enviar" value="enviar" />
		</form>
    </body>
</html>

ACTIVIDAD 2USO DE FUNCIONES CON CADENAS DE CARACTERES

Construir una página HTML que contenga una entrada del tipo TEXT y
una del tipo SUBMIT que permita determinar si el valor que se ha
ingresado es palíndrome.

OBS. Una cadena se dice palíndrome cuando su inverso es igual a la
palabra.

FUNCIONES DE UTILIDAD

// Devuelve la cadena sólo en letras minúsculas
cadena.toLowerCase();
// Devuelve un arreglo de caracteres con todas las palabras de ‘cadena’
que se encuentran separadas por “ “
cadena.split(“”);
// Devuelve el reverso de cadena
cadena.reverse();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Laboratorio JavaScript 02</title>
        <script type="text/javascript">
			function isVacio(q) {  
				for ( i = 0; i < q.length; i++ ) {  
					if (q.charAt(i) != " ") return false;  
				}  
				return true;  
			}  
			function isPalindrome(pal) {
				var palabra = pal.toLowerCase();
				for(var i=0; i<palabra.length; i++) {
					if(palabra.charAt(i) != palabra.split("").reverse().join("").charAt(i)) return false;
				}
				return true;	
			}
			function comprobar(palabra) {
				if(isVacio(palabra)) {
					alert('Ingresa un Valor');
					return;
				}
				if(isPalindrome(palabra)) { alert('Es Palindrome :D'); } 
				else { alert('No Es Palindrome :('); }
			}
        </script>
    </head>
    <body>
        <form id="formularioB" onsubmit="comprobar(this.palabra.value); return false;">
			<input type="text" id="palabra" /> 
			<input type="submit" id="enviar" value="enviar" />
		</form>
    </body>
</html>

ACTIVIDAD 3USO DE CICLOS

Construir una página HTML que contenga dos entradas del tipo TEXT,
llamadas X e Y, además debe contar una del tipo SUBMIT que permita
imprimir la tabla de multiplicar del valor ingresado en X desde 1
hasta Y. Por ejemplo, suponga que X = 6; Y = 11 deberá generar la
siguiente salida:

6 x 1 = 6
6 x 2 = 12
6 x 3 = 18
6 x 4 = 24
6 x 5 = 30

6 x 11 = 66

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Laboratorio JavaScript 03</title>
        <script type="text/javascript">
			function isVacio(q) {  
				for ( i = 0; i < q.length; i++ ) {  
					if (q.charAt(i) != " ") return false;  
				}  
				return true;  
			} 
			function isNumeric(valor) {
				return (isNaN(valor)) ? false : true;
			}
			function addHTML(x,y,z) {
				if(isVacio(x) || isVacio(y)) {
					alert('Debes Ingresar los Datos');
					return;
				}
				if(!isNumeric(x) || !isNumeric(y)) {
					alert('Debes Ingresar Solo Numeros');
					return;
				}
				var tr=null;
				document.getElementById(z).innerHTML ='';
				for(i=1; i <= parseInt(y); i++) {
					tr = document.createElement('tr');
						var td = document.createElement('td');
						td.innerHTML = x+" x "+i+" = <b>"+(parseInt(x) * i)+"</b>";
					tr.appendChild(td);
					document.getElementById(z).appendChild(tr);
				}
				
			}
        </script>
    </head>
    <body>
        <form id="formularioB" onsubmit="addHTML(this.x.value,this.y.value,'Multiplicacion'); return false;">
			Entrada A:<input type="text" id="x" /><br /> 
			Entrada B:<input type="text" id="y" /><br /> 
			<input type="submit" id="enviar" value="enviar" />
		</form>
		<table id="Multiplicacion">
			
		</table>
    </body>
</html>

ACTIVIDAD 4GENERACIÓN DE DÍGITO VERIFICADOR

Construir una página HTML que contenga una entrada del tipo TEXT y
una entrada del tipo SUBMIT que permita leer un campo de texto
NUMÉRICO que no EXCEDA los seis (6) caracteres y que CALCULE en un
entrada del tipo TEXT que DEBE ESTAR DESHABILITADA el dígito
verificador asociado al código que se ha ingresado, de acuerdo al
siguiente procedimiento:

Para obtener el dígito verificador se debe aplicar el siguiente
procedimiento. Suponga que se desea generar el dígito verificador de 2504
deberá aplicar el siguiente procedimiento:


COEFICIENTES 3 2 7 6 5 4
* * * * * *
CÓDIGO 2 5 0 4 1 1

Se multiplica cada dígito del código por los coeficientes que
corresponden y luego se suman todas las cantidades. En este caso se
tiene: 6 + 10 + 0 + 24 + 5 + 4 = 49

Luego se debe dividir el 49 por 9 y se debe guardar el RESTO y el dígito
verificador se calcula de acuerdo a la siguiente fórmula:

Dígito Verificador = 9 – RESTO

En el caso del ejemplo el dígito verificador debería ser 5, dado que el
resto de la división entre 49 y 9 es 4 y al realizar la resta se tiene
que el dígito es 5.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Laboratorio JavaScript 04</title>
        <script type="text/javascript">
			function isNumeric(valor) {
				return (isNaN(valor)) ? false : true;
			}
			function validar(numero) {
				document.getElementById('dv').value ='';
				if(!isNumeric(numero)) {
					alert('Debes Ingresar solo Numeros');
					return;
				}
				if(numero.length != 6) {
					alert('El Numero debe tener un largo de 6 caracteres');
					return;
				}
				var suma=0;
				var numeros = new Array(3,2,7,6,5,4);
				for(var i=0; i < numero.length; i++) {
					suma += parseInt(numero.charAt(i)) * parseInt(numeros[i]);
				}
				document.getElementById('dv').value = (9 - (suma % 9));
			}
        </script>
    </head>
    <body>
        <form id="formularioC" onsubmit="validar(this.x.value); return false;">
			Entrada: <input type="text" id="x" maxlength="6" />-<input type="text" id="dv" maxlength="6" disabled /><br /> 
			<input type="submit" id="enviar" value="enviar" />
		</form>

    </body>
</html>

Saludos!

Categorías:JavaScript Etiquetas: , , , , ,