Separata Javascript

JavaScript UTPIng. Alberto Moreno

1

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:<script language="JavaScript">//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 delcontrol 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 mayorVar num1,num2If(num1>num2){

alert(num1);}else{

alert(num2);}

La sentencia switch.Hace que se seleccione un grupo de sentencias entre varias posibles. Su sintaxis es:


2

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 10num=0do{alert(num);num+=2;}while(num<=10);

num=0while(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(“hola\tMundo”) Note que hay un \t que es salto tabularHola .- alert(“hola\nMundo”)note ah hay un \n es salto de lineaMundoHay 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 decaracteres "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 enla variable cad.setTimeout(expresión, msec). Este métodoejecuta la expresión pasada como argumento después de que elnúmero de milisegundos msec haya pasado.


3

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 nombreWindowName y accede al URL indicado, si éste campo se pasa "en blanco" obtendremos una ventanavací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 marcaBODY. El contenido del documento se delimita por la secuencia <BODY>...</BODY>; y sepuede 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 eldocumento. En esta página.document.images[0].src = ima.jpglinkColor. 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í comosus propiedades. En esta página:document.link[0] =cap6.htmdocument.link[1] =cap9.htmltitle. Título del documento HTML. En esta página:document.title = Los objetos predefinidosvlinkColor. Color de enlaces accedidos. En esta página:document.vlinkColor =

Los métodos de document.


4

eval(expresión). Evalúa una expresión.cad=”alert(‘hola’”)eval(cad) .- esto mostrara un mensaje que diga holawrite("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 JavaScriptObjeto StringcharAt(í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 posicionindexOf(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 numeronegativo.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 MathEl objeto Math predefinido posee propiedades y métodos asociados a las constantes y funcionesmatemá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 funcionEjemplo: Math.sqrt(3).- saca la raiz cuadrada de 3.


5

Objeto Date

El lenguaje JavaScript no posee variables tipo fecha, pero el objeto predefinido Date permiten lamanipulación de datos que representen fechas. Este objeto no posee propiedades pero posee un númeroimportante 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 demé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. Estavariable 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 vareferido al 1 de Enero de 1970 a las 00:00:00 y es el valor en milisegundos, con signo positivo si la fechaes 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 ala ya conocida fecha de referencia del 1 de Enero de 1970 a las 00:00:00 horas. Para referenciar estemé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 entradava referido al 1 de enero de 1970 a las 00:00:00 y es el valor en milisegundos, con signo positivo si lafecha 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.


6

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 elementosque 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 5Ejemplos: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 debecrear arreglos paralelos donde se guardara esa información).El resultado seria asi:

Autor:L.A.A.HEl codigo seria asi:<body><script language="JavaScript">


7

var cd=new Array("Jenifer Lopez","Gloria Trevi","Monica Naranjo","Lorena Herrera","Maria ConchitaAlonso","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 elpais//de origen en precio el precio del cd y en imag va el nombre de la imagen que queremos insertardocument.write("<table border=1>");//Con esto estamos dibujando una tabladocument.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 todostendran la misma longitudfor(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 imagendocument.write("</tr>");//cierra la fila}/*Si analizamos veremos que se esta sumando cadenas en la parte donde se agrega la imagen notemos quehay 3 cadenas la primera es "<td><img src=" de ahi se esta sumando con el valor que tome el vector imagsi la variable que controla el for esta en 0 sera "jenifer.jpg" y esa es la segunda cadena luego a esto se lesuma 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 locontrario 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 quequeremos que salga ni bien cargue la pagina ademas noten que le codigo script esta dentro del tagBODY ya que si lo ponenos en HEAD no saldra nada.

2.- Objeto Select (ListMenu o Combobox/Listbox).- Este objeto servira para almacenar información ymostrarlo 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ónSelectedIndex.-Da el índice de la opción de la lista seleccionada actualmente


8

options[n].value.-Indica el valor del elemento n de la lista, tal y como está especificado en el tagOPTIONoptions[n].text.-Contiene la cadena de texto que representa la opción n de la listaoptions[n].selected.-Indica si la opción n está actualmente seleccionadaoptions[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 alescoger un departamento automáticamente en un list se mostrara los distritos que pertenecen a esedepartamento( Use arreglos para llenar los departamentos y distritos);El resultado seria asi:

Autor:L.A.A.HEl codigo seria asi:<html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script language="JavaScript">//se declara los vectores fuera de las funciones esto quiere decir que son variables publicasvar depa = new Array("Lima","Tumbes","Arequipa","Piura");//Por cada deparatamento se declara un vector que contendra sus distritosvar 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 depratamentosform1.cbodepa.length = depa.length; //al poner form1.cbodepa.length se esta estableciendo cuantoselementos tendra el combofor(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 quetomara ese elemento form1.cbodepa.options[i].text = depa[i];//Aqui se pone lo que se quiere mostrar en el combo por cadaelemento}}//la funcion cargardepa sera llamado en el body del formulario en el evento onloadfunction cargadist(){//Esta funcion lleneara el list dependiendo de que departamento se escogio se llamaraen el evento change del combo


9

vector =form1.cbodepa.value;//La variable vector tendra el valor del combo en otras palabras sealmacenara 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 elcombo de depratamento es decir imaginémonos que se escogio Piura en el combo entonces la variablevector tendra como valor "Piura" y si a eso se le suma ".length" en total tenemos "Piura.length" entoncestenemos una cadena y si queremos ejecutar esa cadena utilizamos la funcion eval() y el resultado seria 2por que el vector Piura tiene 2 elementos*/form1.lstdist.length = longfor(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 semarque por defecto/*Dentro del for estamos poniendo en cada elemento del listbox los elementos del vector con el que se estatrabajando por ejemplo si en el combo escogimos Piura la variable vector tomara el valor de "Piura" y si aeso se le suma "[i]" tenemos "Piura[i]" y si quiero ejecutar esa cadena utilizo eval imaginemos que i vale0 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 entoncesal crear los vectores para guardar los distritos debemos ponerles el mismo nombre es decir varLima = 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 unavez cargado el combo y si escoges Lima llamamon a la funcion cargardist donde en una variable seguarda 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 saldriaerror.


10

Practica 3: Tenemos una pagina donde se debe escoger una o mas carreras de un Listbox al hacer clic enun boton debe mostrarse un mensaje indicando cuantas carreras se escogio, las carreras que se escogierony 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 propiedadvalue el precio de dicha carreraEl resultado seria asi:

Autor:L.A.A.HEl codigo seria asi:<html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><script language="JavaScript">function calcular(){long = form1.lstcarrera.length;//Saca la cantidad de elementos que tiene el listboxcosto=0;//Aqui se guardara el total a pagar por los cursos que se escogacursos="";//En esta varible se almacenara los nombres de los cursos que se escogeramcon=0;//Guarda la cantidad de cursos escogidosfor(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 elcual 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++; }}


11

alert("La cantidad de cursos seleccionado son : " + con + "\nLos Cursos escogidos son : " + cursos + "\nElMonto a pagar es: " + costo);//En un alert si se pone \n esto hace que se haga un salto de linea}</script><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>

3.- Objeto CheckBox y RadioButton.- Este objeto sirve para escoger entre varias opciones en el caso delradiobutton solo se podra escoger una de las opciones y en el caso de los check se podra escoger una ovarias opcionesPara cuando trabajemos con radiobutton solo se pueda escoger entre varias opciones solo una de ellas seles debe poner el mismo nombre<input type=radio name=optcat>A<input type=radio name=optcat>Bcon 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 ejemplovalor = form1.optcat[0].checked en la variable valor se almacenara TRUE(si esta seleccionado) oFALSE(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>Femeninopara saber cual de los 2 se escogio podriamos hacer lo siguiente:sexo = (form1.optsexo[0].checked?”Masculino”:”Femenino”); asi de facilen 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 otodos Ejem: <input type=checkbox name=check1> para saber si esta marcado este check solo debriamospreguntar if(form1.check1.checked) y nada mas.


12

NOTA: Quizas llegue un momento donde haigan muchas opciones a escoger por decir imaginemos quetenemos 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 forfor(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 caso10 dentro del for se pregunta por cada elemento si esta seleccionado, si lo esta extrae el valor delelemento(lo que se haya puesto en la propiedad value) por eso es importante en la propiedad value de cadaradio ponerle un valor en este caso le debemos poner la letra que le corresponde. Al final ponemos unalert(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 basicoademas se debe escoger una categoría puede ser de la A a la J dependiendo de la categoría se dara unabonificació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 susueldo basico), AFP (6%) IPSS (4%). Y por ultimo en tipo de pago se debe escoger si se va a pagarsemanal (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.El resultado seria asi:

El codigo seria asi:


13

<html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script language="JavaScript">function calcular(){var i,basico,afp,ipss,boni;basico = parseInt(form1.txtbasico.value);//Se guarda el sueldo basicofor(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 decontroles llamdo optcat al primero que se creo en value se le puso 100 al segundo 90 al tercero 80 y asisucesivamente hasta el ultimo que se le puso 10 dentro del for se esta preguntando si ha sido seleccionadouno de los elementos si lo fue en la variable boni se almacena el valor del elemento seleccionado es decirla bonificacion que se le da (transformado a numero con parseInt) como ya se encontro el elementoseleccionado 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 loguardo en la variable fonavi si no 0afp =(form1.chkafp.checked?basico *0.06:0);ipss =(form1.chkips.checked?basico *0.04:0);neto = basico + boni - fonavi - afp - ipss//Calculo el netoform1.txtboni.value = boni;//paso los valores de las variables a las cajas de textosform1.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 necesarioif(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>


14

<form name="form1" method="post" action=""> <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 <input type="radio" name="optcat" value="90"> C <input type="radio" name="optcat" value="80"> D <input type="radio" name="optcat" value="70"> E <input type="radio" name="optcat" value="60"> F <input type="radio" name="optcat" value="50"> G <input type="radio" name="optcat" value="40"> H <input type="radio" name="optcat" value="30"> I <input type="radio" name="optcat" value="20"> 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">


15

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>


16

<p> </p></form>

</body></html>

4.- Arreglos de Controles.- Ya hemos visto como es una arreglo de controles lo vimos para manejar lasopciones en el ejemplo anterior(Practica 4) pero no solo a los radios se les aplica esto tambien funcionacon cualquier objeto por ejemplo: se desa crear un arreglo de controles para un button entonces lo unicoque 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 sedebe poner numeros aleatorios a los botones(Utilize la propiedad Value)El resultado seria asi:

El codigo seria asi:<html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script language="JavaScript">function generar(){ for(i=0;i<form1.cmdboton.length;i++){//Se hace un for hasta la cantidad de elementos que tiene estearreglo de cmdboton que es 5 form1.cmdboton[i].value = parseInt(Math.random()*100);//Por cada elemento en la propiedad value lepone un numero aleatorio }}</script></head>

<body>


17

<form name="form1" method="post" action=""> <input name="cmdboton" type="button" id="cmdboton"> <input name="cmdboton" type="button" id="cmdboton"> <input name="cmdboton" type="button" id="cmdboton"> <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 lossiguientes: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 lamarca TEXTAREA.onClick Se produce cuando se hace clic en un elemento del formulario o un enlace hipertexto. Se aplicatanto 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 INPUTTYPE="text", SELECT y TEXTAREA.onError Se produce cuando se obtiene un error al cargar el documento HTML. Se aplica sobre las marcasBODY y FRAMESET.onFocus Se produce cuando se Activa un campo de edición. Se aplica a la marca INPUT TYPE="text" y ala 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 marcasA AREA.onMouseOver Se produce cuando desplaza el mouse sobre los enlaces de hipertexto. Se aplica sobre lamarca 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 lamarca 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 ejemploTenemos 2 cajas de texto y queremos que al hacer clic en la caja de texto nos salga un alert con el valorque se ingreso en dicha caja de texto

18

<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 thispero cuando se hace clic en txtcod this tomara el valor de txtcod y cuando se hace clic en txtnom thistomara el valor de txtnom, cosa que cuando se recibe le parámetro en la funcion mensaje CAJA tomara elvalor 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 quecuando las cajas de textos tomen el enfoque se cambie el color de fondo a rojo y cuando pierda el enfoqueregreso al color blanco Ademas escribir el nombre de 5 Colores y al pasar el mouse por el nombre delcolor el fondo de la pagina debera cambiar a el color que se escogio y cuando se aleje el mouse deberaregresar a color balnco.Por ultimo cuando cargue la pagina debera salir un mensaje donde diga “Bienvenido” y al salir de lapagina debe salir un mensaje “Adios” asi como tambien cuando cambiemos de tamaño a la pagina en labarra de estado debe salir “Estoy cambiando de Tamaño”El codigo seria este:<html><head><title>Portal UTP</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script language="JavaScript">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 textoesta tomando el enfoque(Onfocus)por lo tanto el color de fondo debe cambiar a rojo y si es 2 esta perdiendo el enfoque(onblur) entoncesdebe 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='EstoyCambiando de Tamaño'" ><p>Ingrese Nombre: <input name="txtnombre" type="text" id="txtnombre" onFocus="cambia(this,1);"onBlur="cambia(this,2)">

19

</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>


20

AutorIng.Alberto MOreno

Separata Javascript

Documents

Transcript of Separata Javascript