Separata Javascript

JavaScript

UTP Ing. Alberto Moreno

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){ } Generalmente el codigo Script va entre los tags 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 del control y su propiedad*/ num = parseInt(form1.txtnum.value); form1.txtdoble.value = num * 2; form1.txtmitad.value = num / 2; } Para llamar a la funcion creada seria asi: 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: 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

UTP Ing. Alberto Moreno

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 ){ } Ejemplo: Mostrar los pares del 1 al 10 num=0 do{ alert(num); num+=2; }while(num<=10); La sentencia For. For(ini;condicion;incremento){ } Ejemplo: Mostrar los numeros del 1 al 10

do{ }while(condicion); num=0 while(num<=10){ alert(num); num+=2; }

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 tabular Hola .- alert(“hola\nMundo”)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

UTP Ing. Alberto Moreno

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 ...; 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

UTP Ing. Alberto Moreno

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(“Hola mundo”) 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

UTP Ing. Alberto Moreno

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

UTP Ing. Alberto Moreno

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: <script language="JavaScript"> 6

JavaScript

UTP Ing. Alberto Moreno

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("");//Con esto estamos dibujando una tabla document.write("");//se bare una fila document.write(""); document.write(""); document.write(""); document.write(""); document.write("");//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");//se bare una fila document.write("");//Muestra los cd almacenados en el vector document.write("");//Muestra los paises almacenados en le vector document.write("");//Muestra los precios almacenados en le vector document.write("");//Saca la imagen document.write("");//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 "" entonces sumemos las 3 cadenas y tenemos "" 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("

Nombre del Cd	Pais de Origen	Precio	Imagen
" + cd[i] + "	" + pais[i] + "	" + precio[i] + "

");//Cerramos la tabla 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

UTP Ing. Alberto Moreno

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); El resultado seria asi:

Autor:L.A.A.H El codigo seria asi: <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 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

UTP Ing. Alberto Moreno

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

Seleccione Departamento: <select name="cbodepa" id="cbodepa" onChange="cargadist();">

Seleccione Distrito
<select name="lstdist" size="1" multiple id="lstdist" style="height=80">

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

UTP Ing. Alberto Moreno

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 El resultado seria asi:

Autor:L.A.A.H El codigo seria asi: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="JavaScript"> function calcular(){ 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
10

JavaScript

UTP Ing. Alberto Moreno

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 }

Seleccione Carrera a Estudiar:
<select name="lstcarrera" size="1" multiple id="lstcarrera" style="height=200"> Computacion e Informatica Enfermeria Electronica Administracion Hoteleria Networking

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 A 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. Masculino 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: para saber si esta marcado este check solo debriamos preguntar if(form1.check1.checked) y nada mas.

11

JavaScript

UTP Ing. Alberto Moreno

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
El codigo seria asi: 12

JavaScript

UTP Ing. Alberto Moreno

<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 basico for(i=0;i

13

JavaScript

UTP Ing. Alberto Moreno

Ingrese nombre de Trabajador
Sueldo Basico:
Categoria:	A B C D E F G H I J
Descuentos:	Fonavi 1% AFP 6% IPSS 4%
Tipo de Pago:	Semanal 14 JavaScript UTP Ing. Alberto Moreno Quincenal Mensual
Bonificacion:
Fonavi
Afp
Ipps
Monto a pagar
Sueldo Neto:

 

15

value="Calcular"

JavaScript

UTP Ing. Alberto Moreno

 

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: Luego queremos mostrar los valores que tiene el boton cmdboton entonces deberíamos hacer lo siguiente: for(i=0;i
El codigo seria asi: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="JavaScript"> function generar(){ for(i=0;i

16

JavaScript

UTP Ing. Alberto Moreno

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

UTP Ing. Alberto Moreno

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: <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 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"; } }

Ingrese Nombre:

18

JavaScript

UTP Ing. Alberto Moreno

Ingrese Edad:

Ingrese telefono

Ingrese Direccion:

 

Rojo

Verde

Azul

Celeste

Negro

19

JavaScript

UTP Ing. Alberto Moreno

AutorIng.Alberto MOreno

20