Javascript

JAVASCRIPT
Javascript es un cdigo interpretado cuya finalidad es darle mayor interactividad a nuestras

pginas web.
o Definicin de la sintaxis del Javascript
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 nmero y visualizar el doble y su mitad.
El codigo script sera el siguiente:
//Aqui esta la funcion que calculara el doble y la mitad

function calcular(){
var num;
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

o Estructuras de control
La sentencia if.
La sentencia if tiene la forma:
if ( Condicin ){
}else{
Ejemplo:
Tener 2 nmeros 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:
switch ( Expresin ){
case Valor 1: Instruccin o bloque de instrucciones;[break;]
case Valor N: Instruccin o bloque de instrucciones;[break;]
[default:]Instruccin o bloque de instrucciones;
}
La sentencia while.
La sentencia while tiene la forma:
while ( Condicin ){
Ejemplo:
Mostrar los pares del 1 al 10
var num=0 ;
do{
alert(num);
num+=2;
} while(num<=10) ;
La sentencia Do - while.
La sentencia Do - while tiene la forma:
do{
while ( Condicin );
Ejemplo:
Mostrar los pares del 1 al 10
var num=0 ;
while(num<=10) {
alert(num);
num+=2;
}
La sentencia For.
for(ini;condicion;incremento){
}
Ejemplo:
Mostrar los nmeros del 1 al 10
for(var i=1 ; i<=10 ; i++){

alert(i);
}
o Objeto windows y sus mtodos
alert("mensaje")
Crea una ventana de dilogo 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 confirmacin (OK/Cancel) en la que se

visualiza la cadena de caracteres "mensaje". El valor devuelto es true si el usuario elige
la opcin 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 dlogo 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(expresin, msec)
Este mtodoejecuta la expresin pasada como argumento despus de que el nmero de
milisegundos msec haya pasado.
Ejemplo:
setTimeout("alert('hola');",1000) .- saldra un mensaje alert depues de 1000
milisegundos.
open("URL","WindowName","Caractersticas")
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 vaca. La
Caractersticas son un conjunto de parmetros que describen las propiedades de la
ventana.
Los posibles parmetros son los siguientes:

o Objeto document y sus mtodos
El objeto document contiene la informacin 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 pgina:

document.alinkColor = yellow;
bgColor. Color del fondo. En esta pgina:

document.bgColor = red;
fgColor. Color del primer plano de un documento. En esta pgina:

document.fgColor = green;
images Propiedad del tipo Image que contiene todas las imagenes presentes en el
documento. En esta pgina.
document.images[0].src = ima.jpg
linkColor. Color de los enlaces hipertexto. En esta pgina:

document.linkColor = blue;
links. Propiedad del tipo link que contiene todos los enlaces del documento. As
como sus propiedades. En esta pgina:
document.link[0]=cap6.htm
document.link[1] =cap9.html
title. Ttulo del documento HTML. En esta pgina:

document.title = Los objetos predefinidos
vlinkColor. Color de enlaces accedidos. En esta pgina:

document.vlinkColor =
Los mtodos de document.

eval(expresin). Evala una expresin.
cad=alert(hola)
eval(cad) .- esto mostrara un mensaje que diga hola
write("cdigo HTML"). Genera cdico HTML en el documento.
document.write(<b>Hola mundo<b>)
writeln("cdigo HTML"). Idntico a write pero inserta un retorno de
carro al final.
o 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 porque es la tercera
posicin.
indexOf(carcter) o indexOf(carcter,ndice) Devuelve el ndice de la primera

ocurrencia del carcter.
cad=abcdefg; c = cad.charAt(c) .- el valor de c seria 2 si en caso no lo encuentra
devuelve un numero negativo.
Tambin 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 minsculas.

cad=ABCDEFG; c = cad.toLowerCase(); el valor de c seria abcdefg
toUpperCase() Transforma una cadena de caracteres en maysculas.

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 mtodos asociados a las constantes y
funciones matemticas.
abs(nmero) .- Devuelve el valor absoluto del nmero pasado por parmetros.

acos(nmero) .-Devuelve el arco coseno del nmero pasado por parmetros.
asin(nmero) .-Devuelve el arco seno del nmero pasado por parmetros.
atan(nmero) .-Devuelve la arco tangente del nmero pasado por parmetros.
ceil(nmero) .-Redondeo superior.
cos(nmero) .-Devuelve el coseno del nmero pasado por parmetros.
exp(nmero) .-Devuelve e elevado al nmero pasado por parmetros.
floor(nmero) Devuelve la parte entera del nmero pasado por parmetros.
log(nmero) Devuelve el logaritmo neperiano del nmero pasado por parmetros.
max(nmero1, nmero2) Devuelve el mximo de dos valore.
min(nmero1, nmero2) Devuelve le mnimo 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(nmero) Redondeo inferior.
sin(nmero) Devuelve el seno del nmero pasado por parmetros.
sqrt(nmero) Devuelve la raz cuadrada del nmero pasado por parmetros.
tan(nmero) Devuelve la tangente del nmero pasado por parmetros
.
NOTA: antes de poner la funcion se pone la palabra reservada Math. La funcion
Ejemplo: Math.sqrt(3).- saca la raiz cuadrada de 3.
Objeto Date
El lenguaje JavaScript no posee variables tipo fecha, pero el objeto predefinido Date
permiten la manipulacin de datos que representen fechas. Este objeto no posee
propiedades pero posee un nmero importante de mtodos que permiten su
actualizacin, la obtencin y la manipulacin de fechas.
JavaScript gestiona las fechas como el lenguaje Java. Estos dos lenguajes comparten
un gran nmero de mtodos que permiten la manipulacin 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(parmetros)

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 parmetros 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 da del mes de 1 a 31.
getDay() Devuelve el da de la semana de 0 (domingo) a 6 (sbado).
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 numrico 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 ao.
parse(ristra) Devuelve el nmero 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 mtodo no hemos de crear ninguna instancia del
objeto Date, bastar con realizar lo siguiente:
var miliseg = Date.parse(string);
Por tanto, decimos que este mtodo es esttico.
setDate(nmero) Asigna el da del mes, donde nmero ser un valor entre 1 y 31.
setHours(nmero) Asigna la hora, donde nmero ser un valor entre 0 y 23.
setMinutes(nmero) Asigna los minutos, donde nmero ser un valor entre 0 y 59.
setSeconds(nmero) Asigna los segundos, donde nmero ser un valor entre 0 y 59.
setTime(nmero) Fija en valor numrico 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(nmero) Asigna el ao.
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.
o 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,Mxico,italia)
o Definicin de Eventos
Los eventos que ms se utilizan en javascript son los siguientes:
Evento Descripcion
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
onAbort Se origina cuando se cancela la carga de una imagen.

onChange Se origina al cambiar en contenido de un campo o seleccin.
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 edicin. 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 edicin. 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 algn botn 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 tamao de una ventana o frame.
o Objeto Select (ListMenu o Combobox/Listbox)

Algunas de sus propiedades:
Options.-Array que contiene una entrada por cada elemento de la lista de seleccin
SelectedIndex.-Da el ndice de la opcin de la lista seleccionada actualmente
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 opcin n de la lista
options[n].selected.-Indica si la opcin n est actualmente seleccionada
options[n].defaultSelected.-Indica si la opcin n es la seleccionada por defecto
o 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 est) se pone [0] porque es un arreglo de controles si
no lo fuera obviaramos esa parte.
Ejemplo: se tiene 2 radios y se quiere saber qu sexo se escogi.
<input type=radio name=optsexo>Masculino
<input type=radio name=optsexo>Femenino
para saber cul 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 est
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 deberiamos preguntar if(form1.check1.checked) y nada
ms.
NOTA: Quizas llegue un momento donde haigan muchas opciones a escoger por decir
imaginemos que tenemos que escoger una categora de la A a la J y luego queremos
saber que categora 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 est 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 escogi.
o 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 tambin
funciona con cualquier objeto por ejemplo: se desea crear un arreglo de controles para
un button entonces lo nico 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 deberamos
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
o THIS
Este objeto puede simplificar muchas cosas 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
<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
parmetro 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 parmetro en la funcion mensaje CAJA tomara el valor con sus propiedades
del control que lo llamo.
o Ejercicios de Aplicacin
Practica 1:
Tenemos una pgina donde se debe mostrar Informacin sobre Cds
disponibles a vender.
Para eso se debe mostrar el nombre del artista, el pas de origen, el precio
del Cd y la foto del CD (se debe crear arreglos paralelos donde se guardara
esa informacin).
El resultado seria as:
Solucion :
<body>
var cd=new Array("Jenifer Lopez","Gloria Trevi","Monica Naranjo","Lorena Herrera","Maria

Conchita Alonso","Patricia Manterola");
var pais=new Array("USA","Mexico","Espaa","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");
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
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 tamao
de lo contrario saldria del tamao natural de la imagen */
document.write("</table>"); //Cerramos la tabla

</script>
</body>
IMPORTANTE.- Noten que para esta pgina no se ha usado ninguna

funcin debido a que queremos que salga ni bien cargue la pagina adems
noten que le cdigo script esta dentro del tag BODY ya que si lo ponemos
en HEAD no saldr nada.
Practica 2:
Tenemos una pgina donde debe haber un combo (select) y se seleccionara
un departamento al escoger un departamento automticamente en un list se
mostrara los distritos que pertenecen a ese departamento (Use arreglos para
llenar los departamentos y distritos);
El resultado seria asi:
Solucion :
<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("Caete","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
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 imaginmonos 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 est 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 est 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 qu??? Por esto imagnense 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 llamaron 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 saldra error.
Practica 3:
Tenemos una pgina donde se debe escoger una o ms carreras de un
Listbox al hacer clic en un botn debe mostrarse un mensaje indicando
cuantas carreras se escogi, las carreras que se escogieron y el total del
monto a pagar.
Nota: Para hacer esta pgina se debe llenar el list los nombres de las
carreras y ponerle en la propiedad value el precio de dicha carrera
Solucion :
<html>
<head>
</head>
var nombre= ;
var precio;
var long = form1.lstcarrera.length; //Saca la cantidad de elementos que tiene el
listbox
var costo=0; //Aqui se guardara el total a pagar por los cursos que se
escoga
var cursos=""; //En esta varible se almacenara los nombres de los cursos
que se
//escogeran
var con=0; //Guarda la cantidad de cursos escogidos
for( var 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++;
}
}
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>
Practica 4:
Tenemos una pgina donde se debe ingresar el nombre de un trabajador y
sueldo bsico adems se debe escoger una categora puede ser de la A la J
dependiendo de la categora se dar una bonificacin de si es A-100 si es B-
90 si es C-80 si es D-70 y as sucesivamente. Hasta J que es 10 soles.
Tambin se debe escoger los descuentos que se le har al trabajador Fonavi
(se le descuenta 1% de su sueldo bsico), 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 botn calcular debe salir los resultados as como el neto
que ser la suma del bsico + la bonificacin fonavi afp ips.
Solucion :
<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>

<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">
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>
<p> </p>
</form>
</body>
</html>
Practica 5:
Tenemos una pgina donde debemos tener 5 botones y al hacer clic en un
boton Generar se debe poner nmeros aleatorios a los botones(Utilice la
propiedad Value)
El resultado seria asi:
Solucion :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1">
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 nmero

aleatorio
}
}
</script>
</head>
<body>
<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>
Practica 6:
Tenemos una pgina donde se debe ingresar nombre ,edad, telefono y
direccin 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 blanco.
Por ltimo 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 tamao a la pgina en la barra de estado
debe salir Estoy cambiando de Tamao
El codigo seria este :
Solucion :
<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 est 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
Tamao'" >

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

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

</p>
<p>Ingrese telefono
<input name="txttele" type="text" id="txttele" onFocus="cambia(this,1);"
</p>
<p>Ingrese Direccion:
<input name="txtdire" type="text" id="txtdire" onFocus="cambia(this,1);"
</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>
Aplicaciones WEB
Una aplicacin web es un sistema informtico que los usuarios utilizan
accediendo a un servidor web a travs de Internet o de una intranet. Las
aplicaciones web son populares debido a la practicidad del navegador web como
cliente ligero. La habilidad para actualizar y mantener aplicaciones web sin
distribuir e instalar software en miles de potenciales clientes es otra razn de su
popularidad.
Aplicaciones como los webmails, wikis, weblogs, tiendas en lnea y la
Wikipedia misma son ejemplos bien conocidos de aplicaciones web.
Los Clientes Web se comunican con los Servidores Web va los protocolos
HTTP y el subyacente TCP/IP. El Browser enva HTTP requests al servidor
que responde con pginas HTML y posiblemente con otros programas en la
forma de controles ActiveX y de Java Applets
A continuacin vamos a definir todo con respecto a Internet e Intranet y

adems como realizar una pgina web a travs del lenguaje HTML.
o Historia de la Internet
El origen de Internet fue un proyecto de defensa de los Estados Unidos. A finales
de los aos 60, la ARPA (Agencia de Proyectos de Investigacin Avanzados) del
Departamento de Defensa defini el protocolo TCP/IP para garantizar la
comunicacin entre lugares alejados en caso de ataque nuclear siguiendo
cualquier ruta disponible. Internet une muchas redes, incluyendo como ms
importantes la que proporciona acceso a los grupos de noticias (Usenet), que
data de 1979 y (conceptualmente) la World Wide Web, diseada por Tim Berners
Lee del CERN a principios de los 90. Actualmente hay varios miles de redes de
todos los tamaos conectadas a Internet, pudiendo compartir datos en base al
protocolo TCP/IP.
Internet no es de nadie y es de todos La conexin entre redes es posible
gracias a protocolos comunes(TCP/IP) y organismos como NIC y ISOC
Cualquier persona puede acceder a Internet y decidir a qu informacin

acceder desde cualquier parte del mundo utilizando cualquier plataforma.
1. Internet vs Intranet
Una intranet es una red interna que utiliza la tecnologa internet. Se
utiliza para el desarrollo de aplicaciones privadas como:
Almacenamiento de publicaciones corporativas

Sistema de directorios comn
Sistema de mensajera interna fcil y cmoda
Sistema de noticias y foros de discusin de inters
corporativo
2. Como Funciona Internet

Host : Es cualquier computadora conectada a Internet y que
dispone de un nmero IP
Nmero IP: Es un nmero de 32(=4*8) bits que identifica a

cada host en la Internet Ej.
200.28.117.13
Arquitectura Cliente Servidor: EL servidor (con # IP)

presta servicios (www, email, ftp,etc) a los clientes.
Protocolo TCP/IP: EL protocolo TCP del remitente divide la

informacin enviada en pequeos paquetes de informacin
(datagramas), los numera y los pasa al protocolo IP.
El protocolo IP etiqueta cada datagrama con la direccin de

origen y de destino, luego los datagramas son enviados.
En Internet, los Routers se encargan de redirigir los paquetes

o datagramas para que lleguen a su destino, segn el nmero
IP del destino
Al recibir datagramas, el protocolo TCP del destinatario

chequea los paquetes por errores de transmisin, y los ordena
por su numeracin. Luego reconstruye la informacin
recibida.
DNS : Adems del nmero IP cada Host puede ser

identificado por su nombre de dominio
Ej. idat.edu.pe = 200.0.118.6
Es un conjunto de servicios basados en hipervnculos,

ofrecidos en todo el mundo a travs de Internet, se lo llama
WWW (World Wide Web - Telaraa de Cobertura Mundial).
No existe un centro que administre esta red de informacin,
sino ms bien est constituida por muchos servicios distintos
que se conectan entre s a travs de referencias en los distintos
documentos

Javascript

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Javascript

Hochgeladen von

Copyright:

Verfügbare Formate

JAVASCRIPT

Javascript es un cdigo interpretado cuya finalidad es darle mayor interactividad a nuestras

Generalmente el codigo Script va entre los tags <HEAD> </HEAD>

El codigo script sera el siguiente:

//Aqui esta la funcion que calculara el doble y la mitad

Para llamar a la funcion creada seria asi:

<input name="cmdcalcular" type="button" value="Calcular" onClick="calcular();">

Noten la propiedad redaonly

for(var i=1 ; i<=10 ; i++){

o Objeto windows y sus mtodos

Hola mundo .- alert(hola mundo)

confirm("mensaje"). Crea una ventana de confirmacin (OK/Cancel) en la que se

prompt("mensaje","texto"). Crea una ventana de dlogo en la que se podra ingresar

Los posibles parmetros son los siguientes:

alinkColor. Color de los enlaces activados. En esta pgina:

bgColor. Color del fondo. En esta pgina:

fgColor. Color del primer plano de un documento. En esta pgina:

linkColor. Color de los enlaces hipertexto. En esta pgina:

title. Ttulo del documento HTML. En esta pgina:

vlinkColor. Color de enlaces accedidos. En esta pgina:

Los mtodos de document.

indexOf(carcter) o indexOf(carcter,ndice) Devuelve el ndice de la primera

substring(principo,fin) Extrae una cadena de caracteres entre un valor de ndice

toLowerCase() Transforma una cadena de caracteres en minsculas.

toUpperCase() Transforma una cadena de caracteres en maysculas.

Length.- Extare la longitud de la cadena cad=abcdefg; c=cad.length; al fian c vale 7

abs(nmero) .- Devuelve el valor absoluto del nmero pasado por parmetros.

NombreVariable = new Date(parmetros)

var vector = new Array(5); donde vector es el nombre de la variable y 5 es la

cant = vector.length el resultado seria 5

onAbort Se origina cuando se cancela la carga de una imagen.

o Objeto Select (ListMenu o Combobox/Listbox)

o Objeto CheckBox y RadioButton

Lo que se podria hacer en este caso es utilizar un for

<input type=button name=cmdboton value=Tres>

<input type=text name=txtcod onclick=mensaje(this)>

var cd=new Array("Jenifer Lopez","Gloria Trevi","Monica Naranjo","Lorena Herrera","Maria

var pais=new Array("USA","Mexico","Espaa","Mexico","Venezuela","Mexico");

document.write("<table border=1>"); //Con esto estamos dibujando una tabla

/* Si analizamos veremos que se esta sumando cadenas en la parte donde se agrega la

document.write("</table>"); //Cerramos la tabla

IMPORTANTE.- Noten que para esta pgina no se ha usado ninguna

var depa = new Array("Lima","Tumbes","Arequipa","Piura");

//Por cada deparatamento se declara un vector que contendra sus distritos

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

//la funcion cargardepa sera llamado en el body del formulario en el evento

function cargadist(){ //Esta funcion lleneara el list dependiendo de que

/*Long tendra la longitud del vector con el cual se va a trabajar dependiendo de lo

IMPORTANTE.- Noten que cuando creamos el vector depa pusimos

basico = parseInt(form1.txtbasico.value);//Se guarda el sueldo basico

/* Para sacar la bonificacion que se le da segun su categoria lo que se ha hecho es crear un

fonavi =(form1.chkfonavi.checked?basico *0.01:0); //Si chkfonavi esta marcado saco el 1% a

neto = basico + boni - fonavi - afp - ipss//Calculo el neto

<form name="form1" method="post" action="">

form1.cmdboton[i].value = parseInt(Math.random()*100);//Por cada

//en la propiedad value le pone un nmero

El codigo seria este :

//Esta funcion hara que cambie el color de fondo de la caja de texto

<body onLoad="alert('Bienvenido');" onUnload="alert('Adios');"

<!--OJO observen que aqui en el onload sale un mensaje lo mismo en el onunload y el

<!--Importante observen que en el evento onfocus se llama a la funcion cambia y se le

A continuacin vamos a definir todo con respecto a Internet e Intranet y

Cualquier persona puede acceder a Internet y decidir a qu informacin

Almacenamiento de publicaciones corporativas