Separata java script

JavaScript IDAT
Por Luis Arias Hidalgo
Separata JavaScript
Javascript es un codigo interpretado cuya finalidad es darle mayor interactividad a nuestras paginas web.
La sintaxis es la siguiente:
<script language="JavaScript">
function nombrefun1(parametros){
}
function nombrefun2(parametros){
}
</script>
Generalmente el codigo Script va entre los tags <HEAD> </HEAD>
Ejemplo:Ingresar un numero y visualizar el doble y su mitad.
El codigo script seria el siguiente:
//Aqui esta la funcion que calculara el doble y la mitad
function calcular(){
var num;
/*En la variable num se almacena el contenido de la caja de texto txtnum se poner form1 por que
asi se llama el formulario form1.La funcion parseInt transforma el valor a entero
NOTA:para acceder a cualquier objeto del formulario se pone el nombre del formulario el nombre del
control
y su propiedad*/
num = parseInt(form1.txtnum.value);
form1.txtdoble.value = num * 2;
form1.txtmitad.value = num / 2;
}
</script>
Para llamar a la funcion creada seria asi:
<input name="cmdcalcular" type="button" value="Calcular" onClick="calcular();">
Se entiende que hay un boton llamado cmdcalcular y cajas de texto llamados txtdoble y txtmitad.
Ahora si queremos que las cajas de texto esten desactivadas seria de la siguiente manera:
<input name="txtmitad" type="text" id="txtmitad" readonly="true">
Noten la propiedad redaonly.
La sentencia if.
La sentencia if tiene la forma:
if ( Condición ){
}else{
}
Ejemplo : tener 2 numero y mostrar el mayor
Var num1,num2
If(num1>num2){
alert(num1);
}else{
alert(num2);
La sentencia switch.
Hace que se seleccione un grupo de sentencias entre varias posibles. Su sintaxis es:
1

JavaScript IDAT
switch ( Expresión ){
case Valor 1: Instrucción o bloque de instrucciones;[break;]
case Valor 2: Instrucción o bloque de instrucciones;[break;]
case Valor 3: Instrucción o bloque de instrucciones;[break;] ...
case Valor N: Instrucción o bloque de instrucciones;[break;]
[default:]Instrucción o bloque de instrucciones;
}
La sentencia while.
La sentencia while tiene la forma:
while ( Condición ){
}
do{
}while(condicion);
Ejemplo: Mostrar los pares del 1 al 10
num=0
do{
alert(num);
num+=2;
}while(num<=10);
num=0
while(num<=10){
alert(num);
num+=2;
La sentencia For.
For(ini;condicion;incremento){
}
Ejemplo: Mostrar los numeros del 1 al 10
For(i=1;i<=10;i++){
Alert(i);
Objeto windows y sus métodos.-
alert("mensaje"). Crea una ventana de diálogo en la que se muestra un mensaje.
Ejemplo:
Hola mundo .- alert(“hola mundo”)
Hola Mundo .- alert(“holatMundo”) Note que hay un t que es salto tabular
Hola .- alert(“holanMundo”)note ah hay un n es salto de linea
Mundo
Hay otro tabuladores como : ”,’,etc.
close(). Destruye la ventana del cliente actual.
Ejemplo: window.close();
confirm("mensaje"). Crea una ventana de confirmación (OK/Cancel) en la que se visualiza la cadena de
caracteres "mensaje". El valor devuelto es true si el usuario elige la opción OK y false en caso contrario.
Ejemplo: rpta = confirm(“Desea salir...?”)
Si escogemos ok rpta tomara el valor de true si no sera false.
prompt("mensaje","texto"). Crea una ventana de díálogo en la que se podra ingresar un valor.
Ejemplo: cad = prompt(“Ingrese Nombre”,”Juan”)
Ingresaremos un nombre pero por defecto va a aparecerle nombre Juan lo que ingresemos se almacena en
la variable cad.
setTimeout(expresión, msec). Este métodoejecuta la expresión pasada como argumento después de que el
número de milisegundos msec haya pasado.
2

JavaScript IDAT
Ejemplo: setTimeout("alert('hola');",1000) .- saldra un mensaje alert depues de 1000 milisegundos.
open("URL","WindowName","Características"). Crea una nueva ventana cliente, le asocia el nombre
WindowName y accede al URL indicado, si éste campo se pasa "en blanco" obtendremos una ventana
vacía. La Características son un conjunto de parámetros que describen las propiedades de la ventana.
Los posibles parámetros son los siguientes:
Ojeto document y sus metodos.-
El objeto document contiene la información respecto al objeto actual. Se define por la marca
BODY. El contenido del documento se delimita por la secuencia <BODY>...</BODY>; y se
puede acceder a las propiedades del objeto document.
Algunas de las propiedades del objeto document son las siguientes:
alinkColor. Color de los enlaces activados. En esta página:
document.alinkColor = yellow;
bgColor. Color del fondo. En esta página:
document.bgColor = red;
fgColor. Color del primer plano de un documento. En esta página:
document.fgColor = green;
images Propiedad del tipo Image que contiene todas las imagenes presentes en el
documento. En esta página.
document.images[0].src = ima.jpg
linkColor. Color de los enlaces hipertexto. En esta página:
document.linkColor = blue;
links. Propiedad del tipo link que contiene todos los enlaces del documento. Así como
sus propiedades. En esta página:
document.link[0] =cap6.htm
document.link[1] =cap9.html
title. Título del documento HTML. En esta página:
document.title = Los objetos predefinidos
vlinkColor. Color de enlaces accedidos. En esta página:
document.vlinkColor =
Los métodos de document.
3

JavaScript IDAT
eval(expresión). Evalúa una expresión.
cad=”alert(‘hola’”)
eval(cad) .- esto mostrara un mensaje que diga hola
write("código HTML"). Genera códico HTML en el documento.
document.write(“<b>Hola mundo<b>”)
writeln("código HTML"). Idéntico a write pero inserta un retorno de carro al final.
Objetos de JavaScript
Objeto String
charAt(índice) Extrae un caracter representado por el índice especificado. Índice está entre 0 y length-1.
cad=”abcdefg”; c = cad.charAt(3) .- el valor de c seria d por que es la tercera posicion
indexOf(carácter) o indexOf(carácter,índice) Devuelve el índice de la primera ocurrencia del carácter.
cad=”abcdefg”; c = cad.charAt(“c”) .- el valor de c seria 2 si en caso no lo encuentra devuelve un numero
negativo.
También se le puede especificar el lugar por el que se quiere que empieze a buscar.
substring(principo,fin) Extrae una cadena de caracteres entre un valor de índice inicial y otro final.
cad=”abcdefg”; c = cad.substring(2,4) .- el valor de c seria “cd” muestra uno antes del valor final.
toLowerCase() Transforma una cadena de caracteres en minúsculas.
cad=”ABCDEFG”; c = cad.toLowerCase(); el valor de c seria ”abcdefg”
toUpperCase() Transforma una cadena de caracteres en mayúsculas.
cad=”abcdefg”; c = cad.toLowerCase(); el valor de c seria ”ABCDEFG”
Length.- Extare la longitud de la cadena cad=”abcdefg”; c=cad.length; al fian c vale 7
Objeto Math
El objeto Math predefinido posee propiedades y métodos asociados a las constantes y funciones
matemáticas.
abs(número) .- Devuelve el valor absoluto del número pasado por parámetros.
acos(número) .-Devuelve el arco coseno del número pasado por parámetros.
asin(número) .-Devuelve el arco seno del número pasado por parámetros.
atan(número) .-Devuelve la arco tangente del número pasado por parámetros.
ceil(número) .-Redondeo superior.
cos(número) .-Devuelve el coseno del número pasado por parámetros.
exp(número) .-Devuelve e elevado al número pasado por parámetros.
floor(número) Devuelve la parte entera del número pasado por parámetros.
log(número) Devuelve el logaritmo neperiano del número pasado por parámetros.
max(número1, número2) Devuelve el máximo de dos valore.
min(número1, número2) Devuelve le mínimo de dos valores.
pow(base, exponente) Devuelve el resultado de elevar la base al exponente.
random() Devuelve el valor aleatorio entre cero y uno.
round(número) Redondeo inferior.
sin(número) Devuelve el seno del número pasado por parámetros.
sqrt(número) Devuelve la raíz cuadrada del número pasado por parámetros.
tan(número) Devuelve la tangente del número pasado por parámetros.
NOTA: antes de poner la funcion se pone la palabra reservada Math. La funcion
Ejemplo: Math.sqrt(3).- saca la raiz cuadrada de 3.
4

JavaScript IDAT
Objeto Date
El lenguaje JavaScript no posee variables tipo fecha, pero el objeto predefinido Date permiten la
manipulación de datos que representen fechas. Este objeto no posee propiedades pero posee un número
importante de métodos que permiten su actualización, la obtención y la manipulación de fechas.
JavaScript gestiona las fechas como el lenguaje Java. Estos dos lenguajes comparten un gran número de
métodos que permiten la manipulación de fechas y utilizan la misma referencia: 1 de enero de 1970.
Se utilizará la sintaxis siguiente para crear un objeto de tipo de Date:
NombreVariable = new Date(parámetros)
donde NombreVariable es el nombre de la variable en JavaScript que representa al objeto creado. Esta
variable puede ser un objeto o la propiedad de un objeto existente.
El constructor Date admite los parámetros siguientes:
ninguno, para crear un objeto que tenga la hora actual. hoy = new Date();
o La fecha que queremos poner hoy = new Date(‘01/01/2001’);
getDate() Devuelve el día del mes de 1 a 31.
getDay() Devuelve el día de la semana de 0 (domingo) a 6 (sábado).
getHours() Devuelve la hora de 0 a 23.
getMinutes() Devuelve los minutos de 0 a 59.
getSeconds() Devuelve los segundos de 0 a 59.
getMonth() Devuelve el mes de un objeto Date. La salida es un valor entero entre 0 (Enero) y 11
(Diciembre).
getTime() Devuelve el valor numérico correspondiente al objeto Date que lo llama, el valor de salida va
referido al 1 de Enero de 1970 a las 00:00:00 y es el valor en milisegundos, con signo positivo si la fecha
es posterior a la de referencia y con signo negativo si la fecha está antes de ésta.
getTimezoneOffset() Devuelve la diferencia con la zona GMT en minutos.
getYear() Devuelve el año.
parse(ristra) Devuelve el número de milisegundos de una string que representa a una fecha con respecto a
la ya conocida fecha de referencia del 1 de Enero de 1970 a las 00:00:00 horas. Para referenciar este
método no hemos de crear ninguna instancia del objeto Date, bastará con realizar lo siguiente:
var miliseg = Date.parse(string);
Por tanto, decimos que este método es estático.
setDate(número) Asigna el día del mes, donde número será un valor entre 1 y 31.
setHours(número) Asigna la hora, donde número será un valor entre 0 y 23.
setMinutes(número) Asigna los minutos, donde número será un valor entre 0 y 59.
setSeconds(número) Asigna los segundos, donde número será un valor entre 0 y 59.
setTime(número) Fija en valor numérico correspondiente al objeto Date que lo llama, el valor de entrada
va referido al 1 de enero de 1970 a las 00:00:00 y es el valor en milisegundos, con signo positivo si la
fecha es posterior a la referencia y negativo en caso contrario.
setYear(número) Asigna el año.
toGMTString() Convierte una cadena de caracteres que representa un fecha al formato GMT.
toLocaleString() Convierte una fecha al formato local.
toString() Convierte convierte una fecha en una cadena de caracteres.
NOTA: Para recoger un valor se pone primer el nombre de la variable Ejemplo : hoy = new Date();
mes = hoy.getMonth(); .- al final la varibe mes tomara el numero de mes.
5

JavaScript IDAT
1.- Arreglos en JavaScript.- Para declarar un arreglo en javascript seria de la siguiente manera:
var vector = new Array(5);  donde vector es el nombre de la variable y 5 es la cantidad de elementos
que tendra esa variable empezando desde el indice 0 hasta al 4.
Se puede saber la longitud del vector mediante al propiedad length es decir:
cant = vector.length  el resultado seria 5
Ejemplos:
var pais = new Array(3);
pais[0]=”peru”;
pais[1]=”mexico”;
pais[2]=”italia”;
Este mismo ejemplo podria declararse de la siguiente forma:
var pais=new Array(“peru”,”México”,”italia”)
Practica 1: Tenemos una pagina donde se debe mostrar Información sobre Cds disponibles a vender.
Para eso se debe mostrar el nombre del artista,el pais de origen,el precio del Cd y la foto del CD(se debe
crear arreglos paralelos donde se guardara esa información).
El resultado seria asi:
Autor:L.A.A.H
El codigo seria asi:
<body>
6

JavaScript IDAT
var cd=new Array("Jenifer Lopez","Gloria Trevi","Monica Naranjo","Lorena Herrera","Maria Conchita
Alonso","Patricia Manterola");
var pais=new Array("USA","Mexico","España","Mexico","Venezuela","Mexico");
var precio=new Array(23,24,25,20,27,22);
var imag=new Array("Jenifer.jpg","Gloria.jpg","Monica.jpg","Lorena.jpg","Maria.jpg","Patricia.jpg");
//En la parte superior se ha declarado los 4 vectores paralelos en cd se guarda el nombre del Cd en pais el
pais
//de origen en precio el precio del cd y en imag va el nombre de la imagen que queremos insertar
document.write("<table border=1>");//Con esto estamos dibujando una tabla
document.write("<tr>");//se bare una fila
document.write("<td>Nombre del Cd</td>");
document.write("<td>Pais de Origen</td>");
document.write("<td>Precio</td>");
document.write("<td>Imagen</td>");
document.write("</tr>");//cierra la fila
//Lo anterior se pudo simplificar en una sola linea
//el for empieza de 0 hasta la longitud del vector cd que sera 6 como los otros vectores son paralelos todos
tendran la misma longitud
for(i=0;i<cd.length;i++){
document.write("<tr>");//se bare una fila
document.write("<td>" + cd[i] + "</td>");//Muestra los cd almacenados en el vector
document.write("<td>" + pais[i] + "</td>");//Muestra los paises almacenados en le vector
document.write("<td>" + precio[i] + "</td>");//Muestra los precios almacenados en le vector
document.write("<td><img src=" + imag[i] + " width=50 height=50></td>");//Saca la imagen
document.write("</tr>");//cierra la fila
}
/*Si analizamos veremos que se esta sumando cadenas en la parte donde se agrega la imagen notemos que
hay 3 cadenas la primera es "<td><img src=" de ahi se esta sumando con el valor que tome el vector imag
si la variable que controla el for esta en 0 sera "jenifer.jpg" y esa es la segunda cadena luego a esto se le
suma una tercera cadena que es " width=50 height=50></td>" entonces sumemos las 3 cadenas y tenemos
"<td><img src=jenifer.jpg width=50 height=50></td>" y asi sera para cada elemento del vector.
si se pone width y height es por la razon que queremos que las imagenes salgan de ese tamaño de lo
contrario saldria del tamaño natural de la imagen*/
document.write("</table>");//Cerramos la tabla
</script>
</body>
IMPORTANTE.- Noten que para esta pagina no se ha usado ninguna funcion debido a que
queremos que salga ni bien cargue la pagina ademas noten que le codigo script esta dentro del tag
BODY ya que si lo ponenos en HEAD no saldra nada.
2.- Objeto Select (ListMenu o Combobox/Listbox).- Este objeto servira para almacenar información y
mostrarlo para seleccionar sea desde una lista simple o una lista desplegable.
Algunas de sus propiedades:
Options.-Array que contiene una entrada por cada elemento de la lista de selección
SelectedIndex.-Da el índice de la opción de la lista seleccionada actualmente
7

JavaScript IDAT
options[n].value.-Indica el valor del elemento n de la lista, tal y como está especificado en el tag
OPTION
options[n].text.-Contiene la cadena de texto que representa la opción n de la lista
options[n].selected.-Indica si la opción n está actualmente seleccionada
options[n].defaultSelected.-Indica si la opción n es la seleccionada por defecto
Practica 2: Tenemos una pagina donde debe haber un combo(select) y se seleccionara un departamento al
escoger un departamento automáticamente en un list se mostrara los distritos que pertenecen a ese
departamento( Use arreglos para llenar los departamentos y distritos);
Autor:L.A.A.H
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
//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 vector 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
elementos 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 funcion cargardepa sera llamado en el body del formulario en el evento onload
function cargadist(){//Esta funcion lleneara el list dependiendo de que departamento se escogio se llamara
en el evento change del combo
8

JavaScript IDAT
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 imaginémonos 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" entonces
tenemos una cadena y si queremos ejecutar esa cadena utilizamos la funcion eval() y el resultado seria 2
por que el vector Piura tiene 2 elementos*/
form1.lstdist.length = long
for(i=0;i<long;i++){
form1.lstdist.options[i].text = eval(vector + "[i]");
}
form1.lstdist.options[0].selected=true;//Con esta sentencia se esta diciendo que le primer elemento se
marque por defecto
/*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]") seria "Sullana"*/
}
</script>
</head>
<body onLoad="cargardepa();">
<form name="form1" method="post" action="">
<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>
IMPORTANTE.- Noten que cuando creamos el vector depa pusimos “Lima”,”Piura”, etc entonces
al crear los vectores para guardar los distritos debemos ponerles el mismo nombre es decir var
Lima = new Array(), var Piura= new Array(), etc.
Por que??? Por esto imagínense que en vez de crear un vector “Lima” creamos un vector
“lima”(noten la letra L) pero en el vector depa tenemos un elemento llamado “Lima” entonces una
vez cargado el combo y si escoges Lima llamamon a la funcion cargardist donde en una variable se
guarda el valor del elemento esogido en el combo osea en este caso “Lima” a esto se le suma
“.length” pero si nosotros no tenemos un vector llamado “Lima” si no “lima” entonces nos saldria
error.
9

JavaScript IDAT
Practica 3: Tenemos una pagina donde se debe escoger una o mas carreras de un Listbox al hacer clic en
un boton debe mostrarse un mensaje indicando cuantas carreras se escogio, las carreras que se escogieron
y el total del monto a pagar.
Nota: Para hacer esta pagina se debe llenar el list los nombres de las carreras y ponerle en la propiedad
value el precio de dicha carrera
Autor:L.A.A.H
<html>
<head>
</head>
long = form1.lstcarrera.length;//Saca la cantidad de elementos que tiene el listbox
costo=0;//Aqui se guardara el total a pagar por los cursos que se escoga
cursos="";//En esta varible se almacenara los nombres de los cursos que se escogeram
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);//Guarda el valor del elemento del lista en el cual se
alamceno el precio del curso
nombre = form1.lstcarrera.options[i].text;//Guarda el nombre del curso
costo = costo + precio; // Acumula los precios
cursos = cursos + nombre + ","; //Acumula los nombres poniendo una , al final
con++;
}
}
10

JavaScript IDAT
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>
<body>
<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>
3.- Objeto CheckBox y RadioButton.- Este objeto sirve para escoger entre varias opciones en el caso del
radiobutton solo se podra escoger una de las opciones y en el caso de los check se podra escoger una o
varias opciones
Para cuando trabajemos con radiobutton solo se pueda escoger entre varias opciones solo una de ellas se
les debe poner el mismo nombre
<input type=radio name=optcat>A
<input type=radio name=optcat>B
con esto tendremos dos radios llamados optcat y se diferenciaran por un indice que empieza de 0.
Lo que se hace es un arreglo de controles.
La propiedad para saber si el elemento ha sido escogido ya sea radio o check es SELECTED por ejemplo
valor = form1.optcat[0].checked en la variable valor se almacenara TRUE(si esta seleccionado) o
FALSE(si no lo esta) se pone [0] por que es un arreglo de controles si no lo fuera obviaríamos esa parte.
Ejemplo: se tiene 2 radios y se quiere saber que sexo se escogio.
<input type=radio name=optsexo>Masculino
<input type=radio name=optsexo>Femenino
para saber cual de los 2 se escogio podriamos hacer lo siguiente:
sexo = (form1.optsexo[0].checked?”Masculino”:”Femenino”); asi de facil
en la variable sexo se guardara dependiendo de la condicion si optsexo de 0 esta marcado se guarda
“Masculino” de lo contrario se marca “Femenino”
En el caso de los check no es necesario que sean arreglos ya que se pueden escoger varios,ningunos o
todos Ejem: <input type=checkbox name=check1> para saber si esta marcado este check solo debriamos
preguntar if(form1.check1.checked) y nada mas.
11

JavaScript IDAT
NOTA: Quizas llegue un momento donde haigan muchas opciones a escoger por decir imaginemos que
tenemos que escoger una categoría de la A a la J y luego queremos saber que categoría se escogio.
Lo que se podria hacer en este caso es utilizar un for
for(i=1;i<form1.optcat.length;i++){
if(form1.optcat[i].checked){
cat = form1.optcat[i].value;
break;
}
}
done form1.optcat.length viene a ser la cantidad de elementos que tiene el arreglo de control en este caso
10 dentro del for se pregunta por cada elemento si esta seleccionado, si lo esta extrae el valor del
elemento(lo que se haya puesto en la propiedad value) por eso es importante en la propiedad value de cada
radio ponerle un valor en este caso le debemos poner la letra que le corresponde. Al final ponemos un
alert(cat) y se mostrara la letra que se escogio.
Practica 4: Tenemos una pagina donde se debe ingresar el nombre de un trabajador y sueldo basico
ademas se debe escoger una categoría puede ser de la A a la J dependiendo de la categoría se dara una
bonificación de si es A-100 si es B-90 si es C-80 si es D-70 y asi sucesivamente. Hasta J que es 10 soles.
Tambien se debe escoger los descuentos que se le hara al trabajador Fonavi (se le descuenta 1% de su
sueldo basico), AFP (6%) IPSS (4%). Y por ultimo en tipo de pago se debe escoger si se va a pagar
semanal (monto a pagar seria su sueldo neto/4),quincenal(el neto /2) o mensual(lo mismo que el neto)
Al hacer clic en el boton calcular debe salir los resultados asi como el neto que sera la suma del basico +
la bonificación – fonavi – afp – ips.
12

JavaScript IDAT
<html>
<head>
var i,basico,afp,ipss,boni;
basico = parseInt(form1.txtbasico.value);//Se guarda el sueldo basico
for(i=0;i<form1.optcat.length;i++){
if(form1.optcat[i].checked){
boni = parseInt(form1.optcat[i].value);
break;
}
}
/*Para sacar la bonificacion que se le da segun su categoria 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 asi
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 almacena el valor del elemento seleccionado es decir
la bonificacion que se le da (transformado a numero con parseInt) como ya se encontro el elemento
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
guardo 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 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>
13

JavaScript IDAT
<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
E
F
G
H
I
J
<input type="radio" name="optcat" value="10" checked></td>
</tr>
<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">
14

JavaScript IDAT
Quincenal
<input type="radio" name="opttipo">
Mensual
<input type="radio" name="opttipo" checked></td>
</tr>
<tr>
<td>Bonificacion:</td>
<td><input name="txtboni" type="text" id="txtboni"></td>
</tr>
<tr>
<td>Fonavi</td>
<td><input name="txtfonavi" type="text" id="txtfonavi"></td>
</tr>
<tr>
<td>Afp</td>
<td><input name="txtafp" type="text" id="txtafp"></td>
</tr>
<tr>
<td>Ipps</td>
<td><input name="txtips" type="text" id="txtips"></td>
</tr>
<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>
</tr>
<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>
15

JavaScript IDAT
<p>  </p>
</form>
</body>
</html>
4.- Arreglos de Controles.- Ya hemos visto como es una arreglo de controles lo vimos para manejar las
opciones en el ejemplo anterior(Practica 4) pero no solo a los radios se les aplica esto tambien funciona
con cualquier objeto por ejemplo: se desa crear un arreglo de controles para un button entonces lo unico
que debemos hacer es ponerle el miso nombre.
Ejemplo:
<input type=button name=cmdboton value=”Uno”>
<input type=button name=cmdboton value=”Dos”>
<input type=button name=cmdboton value=”Tres”>
<input type=button name=cmdboton value=”Cuatro”>
Luego queremos mostrar los valores que tiene el boton cmdboton entonces deberíamos hacer lo siguiente:
for(i=0;i<form1.cmdboton.length;i++){
alert(form1.cmdboton[i].value);
}
y con esto saldra 4 mensajes “Uno”,”Dos”,”Tres” y “Cuatro”
Practica 5: Tenemos una pagina donde debemos tener 5 botones y al hacer clic en un boton Generar se
debe poner numeros aleatorios a los botones(Utilize la propiedad Value)
<html>
<head>
function generar(){
for(i=0;i<form1.cmdboton.length;i++){//Se hace un for hasta la cantidad de elementos que tiene este
arreglo de cmdboton que es 5
form1.cmdboton[i].value = parseInt(Math.random()*100);//Por cada elemento en la propiedad value le
pone un numero aleatorio
}
}
</script>
</head>
<body>
16

JavaScript IDAT
<input name="cmdboton" type="button" id="cmdboton">
<input name="cmdboton" type="button" id="cmdboton"></br>
<input name="cmdcalcular" type="button" value="Generar" onClick="generar();">
</form>
</body>
</html>
5.- Trabajando con los eventos y el Objeto THIS..- Los eventos que mas se utilizan en javascript son los
siguientes:
onAbort Se origina cuando se cancela la carga de una imagen.
onBlur Se produce al deseleccionar un campo de edición. Se aplica a la marca INPUT TYPE="text" y a la
marca TEXTAREA.
onClick Se produce cuando se hace clic en un elemento del formulario o un enlace hipertexto. Se aplica
tanto a la marca INPUT TYPE="button,checkbox,radio" como a la marca .
onChange Se origina al cambiar en contenido de un campo o selección. Se aplica a las marcas INPUT
TYPE="text", SELECT y TEXTAREA.
onError Se produce cuando se obtiene un error al cargar el documento HTML. Se aplica sobre las marcas
BODY y FRAMESET.
onFocus Se produce cuando se Activa un campo de edición. Se aplica a la marca INPUT TYPE="text" y a
la marca TEXTAREA.
onLoad Se origina cuando se carga el documento HTML. Se aplica a las marcas BODY y FRAMESET.
onMouseOut Se produce cuando alejamos el mouse de un enlace de hipertexto. Se aplica sobre las marcas
A AREA.
onMouseOver Se produce cuando desplaza el mouse sobre los enlaces de hipertexto. Se aplica sobre la
marca A y AREA.
onReset Se produce cuando se resetea el formulario. Se aplica sobre la marca FORM.
onSelect Se produce al seleccionar un campo de edición. Se aplica sobre las marcas INPUT TYPE="text"
y TEXTAREA.
onSubmit Se origina al enviar el formulario.Se aplica sobre al marca FORM.
onUnload Se origina al abandonar el documento HTML. Se aplica sobre las marcas BODY y FRAMESET.
onDblClick Se produce cuando se hace doble clic en un formulario o enlace hipertexto. Se aplica tanto a la
marca INPUT TYPE="button,checkbox,radio" como a la marca .
onDragDrop Se produce cuando se vuelca (drop) un objeto sobre la ventana del navegador.
onKeyDown Se produce cuando se pulsa una tecla.
onKeyPress Se produce cuando se tiene una tecla pulsada.
onMouseDown Se origina al pulsar algún botón del mouse.
OnMouseMove Se origina al mover el cursor.
onMove Se produce cuando se mueve una ventana o frame.
onResize Se produce al cambiar el tamaño de una ventana o frame.
THIS_ este objeto puede simplificar muchas cosa por ejemplo
Tenemos 2 cajas de texto y queremos que al hacer clic en la caja de texto nos salga un alert con el valor
que se ingreso en dicha caja de texto
17

JavaScript IDAT
<input type=text name=txtcod onclick=”mensaje(this)”>
<input type=text name=txtnom onclick=”mensaje(this)”>
function mensaje(caja){
alert(caja.value);
}
Entonces observemos que en ambas cajas se llama a la misma funcion y se envia como parámetro this
pero cuando se hace clic en txtcod this tomara el valor de txtcod y cuando se hace clic en txtnom this
tomara el valor de txtnom, cosa que cuando se recibe le parámetro en la funcion mensaje CAJA tomara el
valor con sus propiedades del control que lo llamo.
Practica 6: Tenemos una pagina donde se debe ingresar nombre ,edad, telefono y dirección se pide que
cuando las cajas de textos tomen el enfoque se cambie el color de fondo a rojo y cuando pierda el enfoque
regreso al color blanco Ademas escribir el nombre de 5 Colores y al pasar el mouse por el nombre del
color el fondo de la pagina debera cambiar a el color que se escogio y cuando se aleje el mouse debera
regresar a color balnco.
Por ultimo cuando cargue la pagina debera salir un mensaje donde diga “Bienvenido” y al salir de la
pagina debe salir un mensaje “Adios” asi como tambien cuando cambiemos de tamaño a la pagina en la
barra de estado debe salir “Estoy cambiando de Tamaño”
El codigo seria este:
<html>
<head>
<title>Portal Idat</title>
function cambia(texto,tipo){//Esta funcion hara que cambie el color de fondo de la caja de texto
/*Recibe 2 parametros el primero es la caja de texto y el segundo es el tipo si tipo es 1 entonces el texto
esta tomando el enfoque(Onfocus)
por lo tanto el color de fondo debe cambiar a rojo y si es 2 esta perdiendo el enfoque(onblur) entonces
debe regresar a su color original.
*/
if(tipo==1){
texto.style.background ="red";
}else{
texto.style.background ="white";
}
}
</script>
</head>
<body onLoad="alert('Bienvenido');" onUnload="alert('Adios');" onResize="window.status='Estoy
Cambiando de Tamaño'" >

<p>Ingrese Nombre:
<input name="txtnombre" type="text" id="txtnombre" onFocus="cambia(this,1);"
onBlur="cambia(this,2)">
18

JavaScript IDAT

</p>
<p>Ingrese Edad:
<input name="txtedad" type="text" id="txtedad" onFocus="cambia(this,1);" onBlur="cambia(this,2)">

</p>
<p>Ingrese telefono
<input name="txttele" type="text" id="txttele" onFocus="cambia(this,1);" onBlur="cambia(this,2)">
</p>
<p>Ingrese Direccion:
<input name="txtdire" type="text" id="txtdire" onFocus="cambia(this,1);" onBlur="cambia(this,2)">
</p>
<p> </p>
<table width="75%" border="1">
<tr>
<td><label onMouseOver="document.bgColor='red'"
onMouseOut="document.bgColor='white'">Rojo</label></td>
<td><label onMouseOver="document.bgColor='green'"
onMouseOut="document.bgColor='white'">Verde</label></td>
<td><label onMouseOver="document.bgColor='blue'"
onMouseOut="document.bgColor='white'">Azul</label></td>
<td><label onMouseOver="document.bgColor='cyan'"
onMouseOut="document.bgColor='white'">Celeste</label></td>
<td><label onMouseOver="document.bgColor='black'"
onMouseOut="document.bgColor='white'">Negro</label></td>

</tr>
</table>
</body>
</html>
19

JavaScript IDAT
Autor:L.A.A.H
20

Separata java script

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Separata java script

Similar a Separata java script (20)

Separata java script