Aplicaciones Con Javascript 38208

Multicomponentes
Aplicaciones con Javascript

Nota.- Estas aplicaciones se ejecutan en el cliente mas no en el servidor
1.- Por ejemplo se tiene una lista de curso(selección múltiple) al hacer un clic en el
boton mostrara un cuadro de dialogo con los cursos seleccionado y el total a pagar, esto
se hizo con PHP veremos ahora como lo efectuamos con javascript (ya que tiene su
propia sintaxis)
Selección.HTM
<head>
<title>Seleccion Multiple </title>
</head>
<script language="JavaScript">
function calcular(){
long = form1.lstcarrera.length;//Obtiene la cantidad de elementos que tiene el listbox
costo=0;// Un acumulador para el total a pagar por los cursos que se selecciono
cursos="";//En esta variable se almacena los nombres de los cursos
con=0;//Guarda la cantidad de cursos escogidos
for(i=0;i<long;i++){//Hace el for para barrerse elemento por elemento
if(form1.lstcarrera.options[i].selected){//Pregunta si el elemento ha sido
seleccionado
precio = parseInt(form1.lstcarrera.options[i].value);// El precio del curso
nombre = form1.lstcarrera.options[i].text;// el nombre del curso
costo = costo + precio; // Acumula los precios
cursos = cursos + nombre + ","; //Concatena los nombres
con++;
}
}
alert("La cantidad de cursos seleccionado son : " + con + "\nLos Cursos escogidos son :
" + cursos + "\nEl Monto a pagar es: " + costo);
//En un alert si se pone \n esto hace que se haga un salto de linea
}
</script>
Multicomponentes
<body>
<form name="form1" method="post" action="">
<p>Seleccione Carrera a Estudiar: <br>
<select name="lstcarrera" size="1" multiple id="lstcarrera" style="height=200">
<option value="200">Computacion e Informatica</option>
<option value="250">Enfermeria</option>
<option value="240">Electronica</option>
<option value="120">Administracion</option>
<option value="450">Hoteleria</option>
<option value="230">Networking</option>
</select>
</p>
<p>
<input name="cmdcosto" type="button" id="cmdcosto" value="Costo"
onClick="calcular();">
</p>
</form>
</body>
</html>
2.-Como saber si una opción esta seleccionada , además cuando se hace un clic en el
botón va mostrar su numero correspondiente.
pagina =>opciones.htm
<title>Empleando opciones</title>
function llena(boton){
form1.txtnum.value = form1.txtnum.value + boton.value;
}
Multicomponentes
function ver(){
xlongitud = form1.optcat.length;
for(i=0;i<xlongitud;i++){
// al recorrer las opciones permite saber que opción selecciono
if(form1.optcat[i].checked==true){
valor = form1.optcat[i].value;
break;
}
}
alert("El valor seleccionado es " + valor);
}
</script>
</head>
<body>
<p>
<input name="txtnum" type="text" id="txtnum">
</p>
<p>
<input type="button" name="Button" value="1">
<input name="Button" type="button" id="Button" value="2"
onClick="llena(this);">
<!—this hace referencia al objeto actual 
</p>
<p>Categorias </p>
<p>
<input type="radio" name="optcat" value="A">
A<br>
<input type="radio" name="optcat" value="B">
B<br>
<input type="radio" name="optcat" value="C">
C<br>
<input type="radio" name="optcat" value="D">
D<br>
<input type="radio" name="optcat" value="E">
E<br>
<input type="button" name="Button" value="Visualizar Categoria"
onClick="ver();">
</form>
</body>
</html>
Multicomponentes
3.- selección en cascada, al seleccionar un pais muestra sus ciudades en otra lista:
combo.htm
<head>
<title>Untitled Document</title>
function cambio(combo,lista){
index = combo.selectedIndex;
switch(index){
case 0:
lista.length = 3;
lista.options[0].text = "Lima";
lista.options[1].text = "Ica";
lista.options[2].text = "Piura";
lista.options[0].selected=true
break;
case 1:
lista.length = 2;
lista.options[0].text = "Madrid";
lista.options[0].value = "M"
lista.options[1].text = "Valencia";
lista.options[1].value = "V"
break;
case 2:
lista.length = 2;
lista.options[0].text = "Caracas";
lista.options[1].text = "Maracaibo";
break;
}
}
</script>
</head>
<body>
<p>Pais:
<select name="select" onChange="cambio(this,this.form.select2);">
<option value="1">Peru</option>
<option value="2">España</option>
<option value="3">Venezuela</option>
</select>
</p>
Multicomponentes
<p>Ciudades:
<select name="select2" size="5" multiple>
</select>
</p>
</form>
</body>
</html>
4.- Calculo simples en la pagina del cliente, el objetivo es saber como utilizar el
valor de un texto, los objetos check y las opciones:
BOLETA.HTM
<title>Boleta de Pago</title>
function calcular(){
var i,basico,afp,ipss,boni;
basico = parseInt(form1.txtbasico.value);//Obtiene el sueldo basico y convierte a Num
for(i=0;i<form1.optcat.length;i++){
if(form1.optcat[i].checked){
boni = parseInt(form1.optcat[i].value); //que opcion selecciono
break;
}
}
/*Para obtener la bonificación que se le da según su categoría lo que se ha hecho es
crear un arreglo de controles llamdo optcat
al primero que se creo en value se le puso 100 al segundo 90 al tercero 80 y así
sucesivamente hasta el ultimo que se le puso 10
dentro del for se esta preguntando si ha sido seleccionado uno de los elementos si lo fue
en la variable boni se alamcena el valor
del elemento seleccionado es decir la bonificacion que se le da (transformado a numero
con parseInt)* como ya se encontro el elemento
Multicomponentes
seleccionado no tiene sentido seguir con el for por eso se pone break, para romper el
for*/
fonavi =(form1.chkfonavi.checked?basico *0.01:0);//Si chkfonavi esta marcado saco el
1% a basico y lo gurado en la variable fonavi si no 0
afp =(form1.chkafp.checked?basico *0.06:0);
ipss =(form1.chkips.checked?basico *0.04:0);
neto = basico + boni - fonavi - afp - ipss//Calculo el neto
form1.txtboni.value = boni;//paso los valores de las variables a las cajas de textos
form1.txtfonavi.value = fonavi;
form1.txtafp.value = afp;
form1.txtips.value = ipss;
form1.txtneto.value = neto;
//Ahora se debe analizar el tipo de pago para esto si no usamos un for por que no es
necesario
if(form1.opttipo[0].checked){
form1.txtmonto.value = neto / 4;
}else{
if(form1.opttipo[1].checked){
form1.txtmonto.value = neto / 2;
}else{
form1.txtmonto.value = neto;
}
}
}
</script>
</head>
<body>
<table width="81%" border="1">
<tr>
<td>Ingrese nombre de Trabajador</td>
<td><input name="txtnom" type="text" id="txtnom"></td>
</tr>
<tr>
<td>Sueldo Basico:</td>
<td><input name="txtbasico" type="text" id="txtbasico"></td>
</tr>
<tr>
<td>Categoria:</td>
<td>A
<input type="radio" name="optcat" value="100">
B
C
D
</td>
</tr>
Multicomponentes
<tr>
<td>Descuentos:</td>
<td>Fonavi 1%
<input name="chkfonavi" type="checkbox" id="chkfonavi" value="checkbox">
AFP 6%
<input name="chkafp" type="checkbox" id="chkafp" value="checkbox">
IPSS 4%
<input name="chkips" type="checkbox" id="chkips" value="checkbox"></td>
</tr>
<tr>
<td>Tipo de Pago:</td>
<td>Semanal
<input type="radio" name="opttipo">
Quincenal
<input type="radio" name="opttipo">
Mensual
<input type="radio" name="opttipo" checked></td>
<tr>
<td>Bonificacion:</td>
<td><input name="txtboni" type="text" id="txtboni"></td>
<tr>
<td>Fonavi</td>
<td><input name="txtfonavi" type="text" id="txtfonavi"></td>
<tr>
<td>Afp</td>
<td><input name="txtafp" type="text" id="txtafp"></td>
<tr>
<td>Ipps</td>
<td><input name="txtips" type="text" id="txtips"></td>
<tr>
<td>Monto a pagar</td>
<td><input name="txtmonto" type="text" id="txtmonto"></td>
<tr>
<td>Sueldo Neto:</td>
<td><input name="txtneto" type="text" id="txtneto"></td>
<tr> <td align="right">
<input name="cmdnuevo" type="reset" id="cmdnuevo" value="Nuevo">
</td>
<td><input name="cmdcalcular" type="button" id="cmdcalcular" value="Calcular"
onclick="calcular();"></td>
</tr>
</table>
<p> </p>
<p> </p>
</form>
</body>
</html>
Multicomponentes
5.- Similar al ejemplo tres , pero con la diferencia que estamos empleando vectores en
javascript:
vectores.htm
<head>
<title>Vectores</title>
//se declara los vectores fuera de las funciones esto quiere decir que son variables
publicas
var depa = new Array("Lima","Tumbes","Arequipa","Piura");
//Por cada deparatamento se declara un vetor que contendra sus distritos
var Lima = new Array("Cañete","Lima","Chincha");
var Tumbes = new Array("Pizarro","La cruz","Tumbes","Zorritos");
var Arequipa = new Array("Camana","Mollendo","Arequipa")
var Piura = new Array("Sullana","Mancora");
function cargardepa(){//Esta funcion llenara el combo con los depratamentos

form1.cbodepa.length = depa.length; //al poner form1.cbodepa.length se esta
estableciendo cuantos elemntos tendra el combo
for(i=0;i<depa.length;i++){
form1.cbodepa.options[i].value = depa[i];//Esto llena un elemento y le pone un
valor es el valor que tomara ese elemento
form1.cbodepa.options[i].text = depa[i];//Aqui se pone lo que se quiere mostrar
en el combo por cada elemento
}
}
//la funcio cargardepa sera llamado en el body del formulario en el evento onload
function cargadist(){//Esta funcion lleneara el list dependiendo de que depratamento se
escogio se llamara en el evento change del combo
vector =form1.cbodepa.value;//La variable vector tendra el valor del combo en otras
palabras se almacenara el nombre del Departamento.
long = eval(vector + ".length");
/*Long tendra la longitud del vector con el cual se va a trabajar dependiendo de lo que
se escogio en el combo de depratamento es decir imaginemonos
que se escogio Piura en el combo entonces la variable vector tendra como valor "Piura"
y si a eso se le suma ".length" en total tenemos
"Piura.length" etonces tenemos una cadena y si queremos ejecutar esa cadena utilizamos
la funcion eval() y el resultado seria 2 por que le vector piura
tiene 2 elementos*/
form1.lstdist.length = long
for(i=0;i<long;i++){
form1.lstdist.options[i].text = eval(vector + "[i]");
Multicomponentes
}
form1.lstdist.options[0].selected=true;//Con esta sentencia se esta diciendo que le
primer elemento se marcque pordefecto
/*Dentro del for estamos poniendo en cada elemento del listbox los elementos del
vector con el que se esta trabajando
por ejemplo si en el combo escogimos Piura la variable vector tomara el valor de
"Piura" y si a eso se le suma "[i]"
tenemos "Piura[i]" y si quiero ejecutar esa cadena utilizo eval imaginemos que i vale 0
entonces al ejecutar esa cadena el resultado de
eval("Piura[i]") el resultado seria "Sullana"*/
}
</script>
</head>
<body onLoad="cargardepa();">
<p>Seleccione Departamento:
<select name="cbodepa" id="cbodepa" onChange="cargadist();">
</select>
</p>
<p>Seleccione Distrito<br>
<select name="lstdist" size="1" multiple id="lstdist" style="height=80">
</select>
</p>
</form>
</body>
</html>
6.- Para colocar la hora , al ingresar una fecha en el cuadro de texto y pulsar enter
se va mostrar la fecha como se muestra en el cuadro de dialogo, además la hora se
observa en la barra de estado:
fecha.htm
Multicomponentes
<head>
<title>hora y fecha</title>
function ponerhora(){
var fec= new Date();
h= fec.getHours();
m= fec.getMinutes();
s= fec.getSeconds();
txthora.value="Son las " + h + " : " + m + " : " + s;
window.status = "Son las " + h + " : " + m + " : " + s;
setTimeout("ponerhora();",1000);
}
function mostrarfecha(){
if(window.event.keyCode==13){
var fecha = new Date(form1.txtfecha.value)
d= fecha.getDate();
m= fecha.getMonth();
a= fecha.getFullYear();
ds=fecha.getDay();
switch(ds){
case 0:dia="Domingo";break;
case 1:dia="Lunes";break;
case 2:dia="Martes";break;
case 3:dia="Miercoles";break;
case 4:dia="Jueves";break;
case 5:dia="Viernes";break;
case 6:dia="Sabado";break;
}
switch(m){
case 0:mes="Enero";break;
case 1:mes="Febrero";break;
case 2:mes="Marzo";break;
case 3:mes="Abril";break;
case 4:mes="Mayo";break;
case 5:mes="Junio";break;
case 6:mes="Julio";break;
case 7:mes="Agosto";break;
case 8:mes="Setiembre";break;
case 9:mes="Octubre";break;
case 10:mes="Noviembre";break;
case 11:mes="Diciembre";break;
}
alert("La fecha es " + dia + " " + d + " de " + mes + " del " + a);
return false;
}
}
</script>
</head>
Multicomponentes
<body onLoad="ponerhora();">
la hora :<input name=txthora readonly=>
<form action="" method="post" name="form1" id="form1">
<p>Ingrese Fecha:
<input name="txtfecha" type="text" id="txtfecha" onKeyPress="return
mostrarfecha();">
</p>
</form>
</body>
</html>
Prof. Alberto Moreno c.

Aplicaciones Con Javascript 38208

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Aplicaciones Con Javascript 38208

Загружено:

Авторское право:

Доступные форматы

Multicomponentes

Aplicaciones con Javascript

function cargardepa(){//Esta funcion llenara el combo con los depratamentos

Prof. Alberto Moreno c.

Вам также может понравиться