Java Script

El lenguaje JavaScript
ndice
Introduccin Qu es JavaScript? Normas del cdigo en JavaScript La ventana alert Formas de introducir Scripts en un documento Uso de funciones Eventos Variables y constantes Operadores Introduccin de datos Sentencias de control Paso de parmetros a funciones Matrices (arrays) Controles Animaciones Objetos predefinidos Mtodos para fecha y hora Mtodos matemticos Mtodos para cadenas
Pag. 1
Manual JavaScript
Introduccin
Los lenguajes Script son una de las mltiples aplicaciones que han surgido para extender las capacidades del Lenguaje HTML. Con ellos no se pueden realizar programas, tan slo mejorar sus pginas Web. Existen varios lenguajes Script: Jscript, VBScript,... aunque el ms utilizado es JavaScript.
Qu es JavaScript?
Javascript es un lenguaje de programacin basado en objetos y en eventos de usuario. Los 'scripts' de Javascript pueden ser introducidos dentro de las pginas de HTML. Con Javascript se puede dar respuesta a eventos iniciados por el usuario (el observador de nuestras pginas, por ejemplo), eventos tales como la entrada de datos en un formulario o algn enlace. Esto sucede sin ningn tipo de transmisin. De tal forma que cuando un usuario escribe algo en un formulario, no es necesario que sea transmitido hacia el servidor, verificado y devuelto. Las entradas son verificadas por la aplicacin cliente y pueden ser transmitidas despus. Aunque JavaScript se parece a Java, no es lo mismo. Java es un lenguaje de programacin mucho ms complejo que JavaScript. JavaScript est hecho para ser un lenguaje bastante fcil de entender. A los autores del JavaScript no les debi haber importado mucho el tema de la programacin. Por esta razn, algunos elementos de Java no son aceptados en JavaScript.
Normas del cdigo en JavaScript

Las normas para poder escribir cualquier cdigo de JavaScript se basan en 5 puntos bsicos y que debemos cumplir siempre. Estas normas son las siguientes: 1. Todo el cdigo (sentencias) debe ir entre los tags <SCRIPT> y </SCRIPT>. Esta etiqueta puede contener el atributo LANGUAGE para definir el tipo de lenguaje Script que utilizamos o la versin de este: <SCRIPT LANGUAGE= JavaScript 1.2 > sentencias; ..... </SCRIPT> Si no se usa el atributo, el navegador interpreta que el lenguaje utilizado es JavaScript. 2. Javacript es casesensitive: sensible a maysculas y minsculas. 3. Todas las instrucciones deben finalizar con ;que indica el salto de lnea. 4. JavaScript usa bsicamente las funciones. 5. Es un LPBO (Lenguaje de Programacin Basado en Objetos) En todo momento usamos objetos, sus propiedades y sus mtodos.
Pag. 2
Manual JavaScript
La ventana alert()
Ms adelante veremos los objetos de JavaScript, aunque para empezar a ver ejemplos introduciremos de un modo bsico uno de los mtodos de este lenguaje. Se trata de la ventana estndar que se usa para mostrar informacin en pantalla. Se puede mostrar texto, variables y texto en conjunto con variables. El diseo de la ventana ya esta definido, lo nico que podemos hacer es mostrar la informacin en una o varias lneas. Su diseo y sintaxis es:
SINTAXIS: alert( texto de la ventana ); alert(variable); alert( texto +variable);
Formas de introducir Scripts en un documento:

Existen tres formas de usar Scripts: 1. Directamente en el cuerpo del documento:
<html> <head> </head> <body> <title>Mi primer JavaScript!</title> Esto es HTML. <br> <script language="JavaScript"> alert("Esto es JavaScript!") </script> <br> Otra vez en HTML.
</html>
</body>
Pag. 3
Manual JavaScript
2. Mediante el uso de eventos:

<html> <title>Mi primer JavaScript!</title> </head> <body onLoad= alert( Esto es JavaScript! ); > Esto es HTML. </body> <head>
</html>
3. Teniendo los Scripts en un archivo independiente (*.js)

<html> <head> </head> <body> </html> </body> <title>Mi primer JavaScript!</title> <script src= .../../archivo.js > Esto es HTML.
EJERCICIOS UNO, DOS Y TRES Probar los cdigos de los puntos 1 y 2 y observar el resultado en su navegador. Grabar como ejercicio1.html y ejercicio2.html respectivamente. Abrir los archivos grabados desde el Navegador Pruebe el punto 3 creando un archivo.html con el cdigo de dicho punto y un archivo.js donde escriba slo alert("Esto es JavaScript!") Sin etiquetas HTML ni los tags <SCRIPT> </SCRIPT>. Grabar como ejercicio3.html. Abrirlo desde el Navegador
Uso de Funciones
Las funciones son un conjunto de sentencias (bloque de cdigo) que especifica al programa las operaciones a realizar. Son tiles para evitar la repeticin de lneas y modular el cdigo. Para trabajar con ellas hay que desarrollarlas y llamarlas cuando lo necesitemos. SINTAXIS DEL DESARROLLO: function nombre_funcion([var1,var2,varN]) { sentencia(s); } SINTAXIS DE LA LLAMADA: a) <elemento evento=nombre_funcion([val1,val2,valN]);> b) nombre_funcion(valor1,valor2,valorN);
Pag. 4 Manual JavaScript
En el primero de los casos la llamada se realiza desde un elemento del documento. En el segundo caso la llamada se realiza desde el interior de otra funcin que tambin es posible. Ahora vamos paso a paso a construir nuestro primer programa usando una funcin: EJERCICIO CUATRO Escriba el siguiente cdigo para efectuar una llamada a una funcin desde un elemento del documento. <html> <head> <script> function hola( ) { alert("Hola a todos"); } </script> </head> <body onLoad=hola();> ....... Se utiliza el evento onLoad, que se ver posteriormente, para ejecutar la funcin hola en el momento de cargar la pgina. Grabar como ejercicio4.html y abrir el archivo grabado desde el Navegador EJERCICIO CINCO Pruebe el siguiente ejemplo para realizar una llamada de una funcin desde otra funcin. <html> <head> <script> function hola() { alert("Hola a todos"); rehola(); } function rehola() { alert( hola de nuevo a todos ); } </script> </head> <body onLoad=hola();> ....... Grabar como ejercicio5.html y abrir el archivo grabado desde el Navegador
Eventos
Un evento es un mecanismo por el cual podemos detectar las acciones que realiza el usuario y llamar automticamente a la funcin que tengamos asociada. Desde esta funcin realizaremos las acciones que tengamos desarrolladas. SINTAXIS: <elemento nombre_evento=nombre_funcion([parametros]);> La siguiente tabla muestra los eventos y manipuladores de JavaScript: EVENTO onLoad onUnLoad onAbort onError onMouseOver onMouseOut onMouseMove onKeyUp onClick onResize onMove onChange onSelect onFocus onBlur onSubmit onReset SE PRODUCE AL Terminar de cargar una pgina o frame (entrar). Descargar una pgina o frame (salir). Abortar la carga de una pgina. Producirse algn error en la carga de la pgina. Pasar el ratn por encima de un enlace, area o frame. Dejar de estar el ratn encima de un enlace, area o frame. Mover el ratn por el documento. Presionar una tecla. Hacer click con el ratn. Dimensionar la ventana del navegador. Mover la ventana del navegador. Modificar texto en un control de edicin. Sucede al perder el foco. Seleccionar texto en un control de edicin. Situar el foco en un control. Perder el foco un control. Enviar un formulario. Inicializar un formulario.
Pag. 6
Manual JavaScript
EJERCICIO SEIS Compruebe la funcionalidad del evento onLoad y del evento onUnLoad en la entrada y la salida de una pgina WEB. <html> <head> <script> function hola() { alert("Hola a todos"); } function adios() { alert("Adios a todos"); } </script> <title>Autor:GRUPO A+L</title> </head> <body onLoad=hola(); onUnload=adios();> ....... Grabar como ejercicio6.html y abrir el archivo grabado desde el Navegador.
EJERCICIO SIETE Compruebe la funcionalidad de los eventos onClick, onFocus y onKeyPress a travs del siguiente cdigo. <html> <head> <script> function pulsa(){alert("Autor:GRUPO A+L");} function foco(){alert("Foco en la primera Caja");} function tecla(){alert("Pulsada tecla");} </script> <title>Autor:GRUPO A+L</title> </head> <body> <input type="button" value="Autor" onClick=pulsa();> <input type="text" size= 5onFocus=foco();> <input type="text" size= 5onKeyPress=tecla();> </body> ....... Grabar como ejercicio7.html y abrir el archivo grabado desde el Navegador
Pag. 7
Manual JavaScript
EJERCICIO OCHO Compruebe la funcionalidad del eventos onResize a travs del siguiente cdigo. Compruebe el efecto que se produce cuando se intenta redimensionar el tamao de la ventana del navegador. <html> <head> <script> function cambio(){alert("Cambiado el tamao");} </script> </head> <body onResize=cambio();> ....... Grabar como ejercicio8.html y abrir el archivo grabado desde el Navegador
Variables y Constantes
Variables
Espacio de memoria con un nombre reservado para guardar informacin mientras la pgina este cargada. El primer paso para poder trabajar con variables es declararlas, que es lugar donde se les da su nombre y su mbito. Para nombrar a una variable debemos tener en cuenta las siguientes normas: 1. 2. 3. 4. 5. No pueden contener espacios. Distingue entre maysculas y minsculas. No pueden contener acentos, puntos o cualquier signo gramatical. No pueden comenzar con un dgito ni contener la letra . Nombre nico y exclusivo para cada variable salvo que estn en funciones distintas.
El mbito de una variable define si la variable se podr utilizar en cualquier parte del documento (variable global). O si slo se podr utilizar dentro de una funcin determinada (variable local). La declaracin de las variables globales se realiza dentro de las etiquetas <script> pero fuera de cualquier funcin. La declaracin de las variables locales se realiza dentro de la funcin que nos interese usar esa variable. La sintaxis para declarar una variable es igual en ambos casos, la nica diferencia es el lugar donde las declaramos. La siguiente lnea nos muestra como hacerlo: var nombre_variable[=valor];
Pag. 8
Manual JavaScript
El tipo de variable es asignado automticamente por JavaScript. Depende del primer valor que se guarde en la variable. Por tanto los tipos de variable existentes son los que mostramos en la siguiente tabla:
TIPO Numrico Booleano String
VALORES Cualquier tipo numrico True o False. Texto o letra.
Otro aspecto importante, es la conversin de datos, que en JavaScript es automtica. Transforma los datos de todas la variables en una expresin segn el tipo de la primera variable. No es muy segura y puede acarrear muchos problemas. EJEMPLO: num1= 12 ; num2=10; x=num1+num2; y=num2+num1; // dara como resultado 1210. // dara como resultado 22. EJERCICIO NUEVE Compruebe el hecho comentado en el apartado EJEMPLO anterior escribiendo el cdigo correspondiente y que al pulsar el botn 1 nos d como resultado 1210 y al pulsar un segundo botn d el segundo resultado. Grabar como ejercicio9.html y abrir el archivo grabado desde el Navegador
Para evitar problemas en las conversiones, se pueden utilizar mtodos ya implementados que realizan la conversin de una manera ms segura.
TIPO DE CONVERSION
SINTAXIS
De texto a numero entero. var_numerica=parseInt(var_texto); De texto a coma flotante var_numerica=parseFloat(var_texto); (decimal). De numrica a texto. Es automtica sin peligro.
Pag. 9
Manual JavaScript
EJERCICIO DIEZ Compruebe con el siguiente ejemplo la utilizacin de variables globales y locales. Es importante comprender el mbito de funcionamiento de las variables. <html> <head> <script> var global=100; function uno() { var local_uno=1; alert("Global " +global +Local +local_uno); dos(); } function dos() { var local_dos=2; alert("Global " +global +Local +local_dos); } </script> <title>Autor:GRUPO A+L</title> </head> <body onLoad=uno();> ....... RECOMENDACI N IMPORTANTE: siempre que sea posible debe utilizarse variables locales en detrimento de las globales, que utilizan muchos ms recursos en un programa, y que a veces pueden producir errores sutiles de programacin, en muchos casos difciles de localizar. Grabar como ejercicio10.html y abrir el archivo grabado desde el Navegador
Constantes ( Literales )
Los valores iniciales que se les asigna son invariables. Estos no son variables, sino expresiones constantes. Los tipos de literales son los mismos que en las variables, segn el primer dato que almacenemos ser de un tipo u otro. TIPO numrica boolean String VALORES Cualquier tipo numrico True o False. Texto o letra.
Pag. 10
Manual JavaScript
Operadores
JavaScript define TRES tipos de operadores: aritmticos, relacionales y lgicos. Tambin hay definido un operador para realizar determinadas tareas, como las asignaciones.
Asignacin (=)
En JavaScript se puede utilizar el operador de asignacin en cualquier expresin valida. Solo con utilizar un signo de igualdad se realiza la asignacin. El operador destino (parte izquierda) debe ser siempre una variable, mientras que en la parte derecha puede ser cualquier expresin valida. Es posible realizar asignaciones mltiples, igualar variables entre s y a un valor. SINTAXIS: variable=valor; variable=variable1; variable=variable1=variable2=variableN=valor;
Aritmticos
Pueden aplicarse a todo tipo de expresiones. Son utilizados para realizar operaciones matemticas sencillas, aunque unindolos se puede realizar cualquier tipo de operaciones. En la siguiente tabla se muestran todos los operadores aritmticos.
OPERADOR
DESCRIPCI N Resta. Suma Multiplica Divide Mdulo (Resto de una divisin) Decremento en 1. Incrementa en 1. decrementa el valor de variable Multiplica el valor de variable
+ * / % -++
variable-=valor variable*=valor
variable+=valor Incrementa el valor de variable
EJERCICIO ONCE <html> <head> </head> <body> <script> var x=5; alert("x= " + x); var y=7; alert("y= " + y); var z=x+y; alert("x+y= " + z); var z=x*y/10; alert("x*y/10= " + z); alert( incremento de x: + x++); alert( decremento de y: + y++); </script> ....... Grabar como ejercicio11.html y abrir el archivo grabado desde el Navegador Aada cdigo a su gusto para comprobar el funcionamiento de los operadores. Utilice los parntesis para diferenciar operaciones.
Lgicos y Relacionales
Los operadores relacionales hacen referencia a la relacin entre unos valores y otros Los lgicos se refiere a la forma en que esas relaciones pueden conectarse entre si. Los veremos a la par por la estrecha relacin en la que trabajan . OPERADORES RELACIONALES OPERADOR DESCRIPCI N Menor que. Mayor que. Menor o igual. Mayor o igual Igual Distinto OPERADORES L GICOS OPERADOR DESCRIPCI N
Y (AND) O (OR) NO (NOT)
< > <= >= == ! =
&& || !
Los operadores lgicos dev uelven el resultado de la comparacin entre el valor de la izquierda y el de la derecha del operador. Si la comparacin se cumple el valor devuelto es true (verdadero) en caso contrario es false (falso).
EJERCICIO DOCE <html> <head> <title>Autor:GRU PO A+L</title> </head> <body> <script> var x=5; alert("x= " + x); var y=7; alert("y= " + y); alert("x es mayor que y? " + (x>y); alert("x es mayor o igual que 5? " + (x>=5); alert("y es mayor o igual que 7 y x es igual a 5? " + (y>=7 && x=5); </script> ....... Grabar como ejercicio12.html y abrir el archivo grabado desde el Navegador. Aada cdigo a su gusto para comprobar el funcionamiento de los operadores lgicos.
Introduccin de Datos
JavaScript per mite interactuar al usuario por medio de la introduccin de datos. La introduccin de datos se puede realizar por medio de la ventana prompt o utilizando controles como cajas de texto.
Ventana prompt:
SINTAXIS: variable=prompt( T exto de la ventana , valor inicial caja ); Al pulsar el botn aceptar, el contenido de la caja pasa a variable. Si se pulsa el botn cancelar, el contenido de la caja se pierde y variable queda con valor null.
Pag. 13
Manual JavaScript
EJERCICIO TRECE Compruebe con el siguient e ejemplo la utilizacin de la ventana PROMPT para capturar un mensaje introducido por el usuario. <html> <head> <script> function valor() { var nombre; nombre=prompt("Introduce Nombre:",""); alert("hola "+nom bre); } </script> </head> <body onload=valor();> ....... Grabar como ejercicio13.html y abrir el archivo grabado desde el Navegador
Caja de texto:
Otro mecanismo por el cual se pueden introducir datos, es mediante las cajas de texto. Todo el trabajo con las cajas, esta basado en propiedades y mtodos del objeto ya implementados en JavaScript. A continuacin se exponen dos ejemplos de los que podemos utilizar: DESCRIPCI N PROPIEDAD MTODO objeto_caja.value; objeto_caja.sefocus(); Contiene el valor es crito en la caja Enva el foco a la caja.
EJERCICIO CATORCE Compruebe con el siguiente ejemplo la utilizacin de las cajas de texto para capturar un mensaje introducido por el usuario. <html> <head> <script> function muestra() { // capturamos el contenido de la caja en uan variable var nombre=document.F1.cnombre.value;
alert("Eres "+nombre); // limpiamos el contenido de la caja document.F1.cnombre.value=""; // enfocamos la caja document.F1.cnombre.focus(); } </script> </head> <body> ....... <form name= F1 > Nombre:<input type="text" name="cnombre" size="20"> <input type="button" value="Ver" onClick=muest ra();> </form> ....... Grabar como ejercicio14.html y abrir el archivo grabado desde el Navegador
Sentencias de Control
Es la manera que tiene JavaScript de provocar que el flujo de la ejecucin avance y se ramifique en funcin de los ca mbios y estado de los datos.
if-else:
La ejecucin atraviesa un conjunto de estados boolean que determinan que bloques de cdigo se ejecutan. Con la utilizacin de esta sentencia nunca se realizarn ambos bloques de cdigo. SINTAXIS: En caso de ser un a sola sentencia por parte las llaves son opcionales. if (expresion -booleana) { Sentencia(s); } else { Sentencia(s); } La clusula else es opcional. La expresin puede ser de cualquier tipo y ms de una (siempre que se unan mediante operadores lgicos). Otra opcin posible es la utilizacin de if anidados, es decir unos dentro de otros compartiendo la clusula else.
Pag. 15
Manual JavaScript
EJERCICIO QUINCE Compruebe la funcionalidad de las sentencias if -else con el cdigo que se presenta a continuacin. Pruebe el resultado del mismo introduciendo una edad menor de 18 aos y otra mayor. Comprobar que en cada caso el resultado es diferente. <html> <head> <script> function ver() { var edad=parseInt(document.F1.cedad.value); // si edad es menor a 18 entra en el if, sino entra en el else if(edad<18) alert("No tienes acceso \nDebes tener 18"); else alert("Bienvenido a la pagina"); } </script> </head> <body> ....... <form name= F1 > Edad:
<input type="text" name="cedad" size="3"> <input type="button" value="Entrar" onClick=ver();> </form>
....... Grabar como ejercicio15.html y abrir el archivo grabado desde el Navegador EJERCICIO DIECISEIS Compruebe la funcionalidad de las sentencias if -else anidadas con el cdigo que se presenta a continuacin. Pruebe diferentes valores en la entrada de datos, hasta comprobar que las diferentes ramas del programa funcionan adecuadamente. Comprobar que en cada caso el re sultado que ofrece el programa es diferente. <html> <head> <script> function ver() { var edad=parseInt(document.F1.cedad.value); if(edad<=18) alert( Abono Joven ); else { if(edad>=65) alert( Abono 3 Edad );
else alert( Abono normal ); } } </script> </head> <body> ....... <form name= F1 > Edad: </form> .......
<input type="text" name="cedad" size="3"> <input type="button" value="Entrar" onClick=ver ();>
Grabar como ejercicio16.html y abrir el archivo grabado desde el Navegador
switch:
Es una sentencia muy similar a if -else. Si los valores con los que se compara son nmeros se pone directamente el pero si es texto se d ebe encerrar entre comillas. La sintaxis de esta sentencia es: SINTAXIS: switch (expresin) { case constante1: sentencia(s); break; case constante2: sentencia(s); break; case constante3: sentencia(s); break; case constanteN: sentencia(s); break; default: sentencia(s); } El valor de la expresin se compara con cada una de las constantes de la sentencia case, si coincide alguno, se ejecuta el cdigo que le sigue, y cuando ejecuta break sale de este bloque hasta salir del switch. Si ninguno coincide se realiza el bloque default (opcional), si no lo hay no se ejecuta nada.
Pag. 17
Manual JavaScript
En el caso que varias sentencias case realicen la misma ejecucin se pueden agrupar, utilizando una sola sentencia break. Evitamos de es te modo duplicar lneas de cdigo. SINTAXIS: switch (expresin) { case constante1:case constante5: sentencia(s); break; case constante3: sentencia(s); break; default: sentencia(s); } EJERCICIO DIECISIETE Compruebe la funcionalidad de la sentencias switch con el cdigo que se presenta a continuacin. Pruebe diferentes valores en la entrada de datos, hasta comprobar que las diferentes ramas del programa funcionan adecuadamente. Comprobar que en cada caso el resultado q ue ofrece el programa es diferente. <html> <head> <script> function especie() { var tipo= document.F1.cespe.value; switch(tipo) { case "humano": alert("Eres un Humano"); break; case "planta": alert("Eres un Vegetal"); break; case "animal": alert("Eres del reino Animal"); break; default: alert("Especie Desconocida"); break; } } </script> </head>
Pag. 18
Manual JavaScript
<body> ....... <form name= F1 > ESPECIE: </form> .......
<input type="text" name="cespe" size="20" onBlur=especie();>
Grabar como ejercicio17.html y abrir el archivo g rabado desde el Navegador
while:
Ejecuta repetidamente el mismo bloque de cdigo hasta que se cumpla una condicin de terminacin. Hay cuatro partes en todos los bucles. Inicializacin, cuerpo, iteracin y condicin. SINTAXIS: [inicializacin;] while(condicion[es]) { cuerpo; [iteracin;] } EJERCICIO DIECIOCHO Pruebe el siguiente bucle de tipo while para comprender como funciona y la sintaxis que debe utilizarse. <html> <head> <script> function mientras() { //inicializacin del contador a 1 contador=1; //bucle while(contador<=10) { alert("Esto sale 10 veces: + contador); // aumentamos el contador contador++; } } </script> </head> <body> ....... Grabar como ejercicio18.html y abrir el archivo grabado desde el Navegador
Pag. 19
<a href="#" onMouseOver=mientras();>bucle while</a>
Manual JavaScript
do..while:
Es lo mismo que en el caso anterior pero aqu como mnimo siempre se ejecutar el cuerpo del bucle una vez, en el tipo de bucle anterior es posible que no se ejecute ni una sola vez el contenido de este. SINTAXIS: [inicializacin;] do { cuerpo; [iteracin;] } while(condicin); EJERCICIO DIECINUEVE Realice el mismo ejemplo que en ejercicio 18, pero utilizando la sentencia do..while. Grabar como ejercicio19.html y abrir el archivo grabado desde el Navegador
for:
Realiza las mismas operaciones que en los casos anteriores pero la sintaxis es una forma compacta. Normalmente la condicin para terminar es de tipo numrico. La iteracin puede ser cualquier expresin matemtica valida. Si de los 3 trminos que necesita no se pone ninguno se convierte en un bucle infinito. SINTAXIS: En caso de ser una sola sentencia p or parte las llaves son opcionales. for (inicio;condicin_para_el_fin;iteracin) { sentencia(S); } EJERCICIO VEINTE Realice el mismo ejemplo que en ejercicio 18, pero utilizando la sentencia for. Grabar como ejercicio20.html y abrir el archivo grab ado desde el Navegador Dentro de las sentencias de control se pueden incluir las sentencias de ruptura ya que van muy ligadas a los bucles. Estas sentencias de ruptura son continue y break. A continuacin vamos a ver como actan cada una de ellas.
Pag. 20
Manual JavaScript
La sentencia continue lo que hace es ignorar las sentencias que tiene el bucle y saltar directamente a la condicin para ver si sigue siendo verdadera, si es as, sigue dentro del bucle, en caso contrario, saldra directamente de el. La sentencia break tiene una operatoria ms drstica que la sentencia continue, en vez de saltar a la lnea de la condicin para comprobar su estado, lo que hace es abandonar directamente el bucle dndolo por terminado. EJERCICIO VEINTIUNO Y VEINTIDOS Realice los siguientes ejemp los para comprobar cmo funciona las sentencias CONTINUE y BREAK dentro de un bucle. Compare la actuacin de cada una de ellas. CONTINUE: El bucle terminar cuando muestre el 10, y se salta el 5
<html> <head> <script> function bucle() { for(cont=1;cont<=1 0;cont++) { if(cont==5) { continue; } alert( en el for + cont); } alert( fuera del for + cont); } </script> </head> <body onLoad=bucle();>
.......
BREAK:
....... Grabar como ejercicio21.html y ejercicio22.html y abrir desde el Navegador

<html> <head> <script> function bucle() { for(cont=1;cont<=10;cont++) { if(cont==5) { break; } alert( en el for+ cont); } alert( fuera del for + cont); } </script> </head> <body onLoad=bucle();>
El bucle terminar cuando muestre el 4
Confirm
Tambin podramos considerar como sentencia de ruptura (sin serlo), un tipo de ventana estndar llamada confirm. Este tipo de ventana permite elegir entre 2 opciones, cada una con un valor de retorno. Con lo que se puede llamar a las sentencias de ruptura ( break, continue) segn la opcin que se elija.
SINTAXIS: var_boolean=confirm( texto de la ventana ); Tabla de los valores que devuelve confirm segn el usuario pulse en un botn u otro:
ACEPTAR CANCELAR
true false
EJERCICIO VEINTITRES Compruebe la funcionalidad de la sentencia CONFIRM. Compare la actuacin del programa segn se pulse el botn de Aceptaro el Cancelar . <html> <head> <script> function confirma() { var respuesta=confirm("Pulsa un botn"); if (respuesta) alert("Has pulsado ACEPTAR"); else alert("Has pulsado CANCELAR"); } </script> </head> <body onLoad=confirma();> ....... Grabar como ejercicio23.html y abrir el archivo grabado desde el Navegador
EJERCICIO VEINTICUATRO Compruebe la funcionalidad de CONFIRM segn se pulse Aceptaro Cancelar . <html> <head> <script> function salida() { var cont=1; var paso=1; for(cont=1;cont<=100;cont++) { alert("Paso " +cont); if(paso==10) { paso=0; res=confirm("Desea Seguir?"); if (!res) break; } paso++; } } </script> </head> <body onLoad=salida();> ....... Grabar como ejercicio24.html y abrir el archivo grabado des de el Navegador
Paso de parmetros a funciones

Es el paso de informacin (parmetros) a una funcin. Cuando se realiza la llamada hay que indicar entre los parntesis los valores que se van a enviar. Estos valores son recogidos por variables locales que son declaradas dentro de los parntesis. El utilizar este mtodo de trabajo evita duplicar lneas, agrupamos el cdigo y nos hace ms sencillo la modificacin y deteccin de errores en el cdigo. Permite El uso de una misma funcin usando valores diferen tes. SINTAXIS DE LA LLAMADA: nombre_funcion(valor1,valor2,valorN); SINTAXIS DEL DESARROLLO: function nombre_funcion(var1,var2,varN) { sentencia(s); }
Solo debemos tener en cuenta, que en la llamada y el desarrollo, el nmero de parmetros coincid a en ambos casos. EJERCICIO VEINTICINCO Compruebe el paso de parmetros a funciones con el siguiente programa. Pulse los diferentes enlaces descritos en el programa para comprobar el resultado que se produce. <html> <head> <script> function opt(valor) { alert( valor pasado: + valor); } </script> </head> <body> .......  <a href="#" onMouseOver=opt(1);>pasar uno</a> <br><br><br><br>  <a href="#" onMouseOver=opt(2);>pasar dos</a> ....... Grabar como ejercicio25.html y abrir el archivo grabado desde el Navegador
Matrices ( Arrays)
Una matriz es una coleccin de variables del mismo tipo que tiene un nombre comn. A un elemento especifico de una matriz se accede mediante su ndice. Todos los arrays tienen como primer ndice el valor 0, aunque podemos inicializar a partir de la posicin que queramos. SINTAXIS: var nombre_array=new Array(); INICIALIZACI N DE UN ELEMENTO: nombre_array[indice]=valor; UTILIZACI N DE ELEMENTOS: Casi como si se tratase de una variable normal. nombre_array[indice];
Pag. 24
Manual JavaScript
EJERCICIO VEINTISEIS Compruebe con el siguiente ejemplo la funcionalidad de los arrays. <html> <head> <script> Dia=new Array(); Dia[1]="lunes"; Dia[2]="martes"; Dia[3]="mircoles"; Dia[4]="jueves"; Dia[5]= viernes ; Dia[6]= sbado ; Dia[7]= domingo ; function ver_dia(valor) { Hoy = new Date(); x = Hoy.getDay() + 1; alert( Hoy es + Dia[x]); } </script> </head> <body> ....... <form name= F1 > <input type="button" value="Ver Da" onClick=ver_dia();> </form> ....... Grabar como ejercicio26.html y abrir el archivo grabado desde el Navegador
EJERCICIO VEINSIETE Realice un programa en el que se defina un array de 10 elementos numricos. Introduzca los valores mediante el cdigo Javascript (sentencia =) o a travs de un bucle for , para que el usuario pueda entrar los valores que desee. Finalmente presente los diez valores que estn almacenados en el array en ventanas de tipo alert . Grabar como ejercicio27.html y abrir el archivo grabado desde el Navegador
Pag. 25
Manual JavaScript
Controles
Hasta el momento hemos visto nicamente botones, cajas de texto y enlaces como controles con los cuales el usuario puede interactuar. Podemos utilizar cualquier objeto de formulario para que el usuario interacte con ellos igual que con los anteriormente vistos, ampliando la flexibilidad a la hora de realizar programas. OBJETO Botones de opcin ( Radio) Casillas de verifica cin (checkbox) Cajas de Contrasea ( password) Cajas de texto multilnea ( area) MODO DE EMPLEO Igual que un botn de comando. Igual que un botn de comando o un radio. Igual que una caja de texto. Igual que una caja de texto o caja de contrasea. Construir el elemento como siempre, aadiendo en la etiqueta <select> el evento change. Y en cada etiqueta <option> aadir el atributo value para poder identificar cual de los elementos ha sido elegido.
Listas y Listas desplegables ( select)
EJERCICIO TREINTAIUNO Realice el siguiente ejemplo de una pgi na que muestra 3 botones de opcin: 1, 2 y 3. El usuario debe elegir uno de ellos. El programa habr generado un nmero aleatorio comprendido entre 1 y 3. Al acertar se gana 100 puntos, con cada fallo se pierden 50 puntos. Mientras se acierte, el programa generar otros nmeros para seguir jugando. <html> <head> <script> var banco=100; var num_secreto=0; function genera() { num_secreto= Math.round(Math.random()*3); if(num_secreto==0) num_secreto=3; } function juego(valor) { if(num_secreto==valor) { alert("Enhorabuena"); banco+=100; genera(); }
else { alert("Fallaste"); banco -=50; } document.F1.caja.value=banco; } </script> </head> <body onload=genera();> <form name= F1 > Apuesta: 1<input type="radio" name="R1" onClick=juego(1);> <br> 2<input type="radio" name="R1" onClick=juego(2);> <br> 3<input type="radio" name="R1" onClick=juego(3);> <br> banco: <input type="text" name="caja" size="20" value="100"> </form> ....... Grabar como ejercicio31.html y abrir el archivo grabado desde el Navegador
EJERCICIO TREINTAIDOS Realice el siguiente ejemplo de Caja de contrasea ( password). Escribiremos una palabra en una caja de contrasea y en una caja de texto iremos viendo la contrasea. <html> <head> <script> function pasa() { var temporal= document.F1.secre.value; document.F1.caja.value=temporal ; } </script> </head> <body> <form name= F1 > CONTRASEA: <input type="password" name="secre" size="5" onKeyUp=pasa();> <br> NORMAL: <input type="text" name="caja" size="5"> </form> </body> </html> Grabar como ejer cicio32.html y abrir el archivo grabado desde el Navegador
EJERCICIO TREINTAITRES Realice el siguiente ejemplo de Lista o Lista desplegable ( select). Mostramos una lista desplegable o lista (el modo de trabajo es el mismo). De la lista desplegable elegimo s un destino que nos mostrar informacin del destino elegido. <html> <head> <script> function viaje() { var valor= document.F1.destino.value; var cadena; switch(valor) { case "1": cadena="Quito. Precio: 27.900"; break; case "2": cadena="Moscu. Precio: 17.000"; break; case "3": cadena="Paris. Precio: 57.900"; break; case "4": cadena="Roma. Precio: 17.900"; break; } alert(cadena); } </script> </head> <body> <form name= F1 > <select name="destino" onChange=viaje();> <option value="1">Quito</option> <option value="2">Moscu</option> <option value="3">Paris</option> <option value="4">Roma</option> </select> </form> ....... Grabar como ejercicio33.html y abrir el archivo grabado desde el Navegador
Pag. 28
Manual JavaScript
EJERCICIO TREINTAICUATRO Realice el mismo ejemplo anterior, pero ms reducido. <html> <head> <script> function viaje() { var valor= document.F1.destino.value; alert(valor); } </script> </head> <body> <form name= F1 > <select size="1" name="destino" onChange=viaje();> <option value="Quito. Precio:17.900">Quito</option> <option value="Moscu. Precio:17.000">Moscu</option> <option value="Paris. Precio:57.900">Paris</option> <option value="Roma. Precio:27.900">Roma</option> </select> </form> ....... Grabar como ejercicio34.html y abrir el archivo grabado desde el Navegador
Animaciones
Mediante JavaScript podemos modificar el estilo de los objetos del documento con lo cual producimos un efecto visual de animacin. Los elementos que producen los efectos ms vistosos son los bloques de texto y las imgenes. Es ms cmodo trabajar con los objetos mediante su nombre, para lo cual usamos el atributo name en el caso de las imgenes e id en el caso de los bloques de texto. Recordemos que, para usar la aplicacin de estilos CSS, debemos incorporar el atributo style con todos aquellos estilos que intervengan en la animacin. De entre todos los estilos que existen, podemos destacar los que hay en la siguiente tabla. style= position: absolute; top: pos; left: pos color: nombre_color visibility: hidden o visible DESCRIPCI N Posibilita el cambio de posicin. Posibilita el cambio de color. Posibilita mostrar y ocultar.
Recordar que si trabajamos con varios estilos todos se incluyen dentro d e un atributo style. Pag. 29 Manual JavaScript
Una vez construida y modificada la o las etiquetas, las variaciones que sufran sus estilos o cualquier otro de sus atributos se realizarn en la funcin que tengamos preparada para ello. Para todos los cambios que realicemos la sintax is a seguir es: SINTAXIS: nombre_etiqueta.style. estilo=nuevo_valor; nombre_etiqueta.atributo= nuevo_valor; El mtodo setTimeout() es til para establecer un intervalo de tiempo para la ejecucin de sentencias. SINTAXIS: setTimeout( sentencias; ,i ntervalo milisegundos); EJERCICIO TREINTAICINCO Compruebe el siguiente cdigo que realiza el movimiento de un texto en horizontal. <html> <head> <script> var horizontal=12; function mueve() { horizontal+=10; TEXTO1.style.left=horizontal; if(horizontal>=200) { horizontal=12; } // pasados 500 milisegundos (1/2 segundo) // volvemos a llamar a la funcin mueve() setTimeout("mueve()",500); } </script> </head> <body onLoad= mueve() > TEXTO </p> </body> </html>
<p id="TEXTO1" style="position:absolute; top:16; left:12">
Grabar como ejercicio35.html y abrir el archivo grabado desde el Navegador Pruebe de animar el texto para que s e mueva tambin verticalmente
Pag. 30
Manual JavaScript
EJERCICIO TREINTAISEIS Compruebe el siguiente cdigo que realiza el efecto de un texto que aparece y desaparece. <html> <head> <script> var estado=true; function ver() { estado=!estado; if(estado) { TEXTO1.style.visibility="visible"; } else TEXTO1.style.visibility="hidden"; setTimeout("ver()",500); } </script> </head> <body onLoad= ver(); > <p id="TEXTO1" style="visibility:visible"> TEXTO</p> </body> </html> Grabar como ejercicio36.html y abrir el archivo grabado desde el Navegador
EJERCICIO TREINTAISIETE Compruebe el siguiente cdigo que realiza un roll -over (efecto de que una imagen cambie cuando el ratn entra y sale del rea que ella ocupa). <html> <head> <script> function pasa(valor) { if(valor==1) img.src="imagen1.gif" else img.src="imagen2.gif" } </script> </head>
Pag. 31
Manual JavaScript
<body>
<img name="img" src="imagen2.gif" onMouseOut= pasa(2);>
onMouseOver= pasa(1);
</body> </html> ADVERTENCIA: debe tener las imgenes imegen1.gif e imagen2.gif preparadas. Grabar como ejercicio37.html y abrir el archivo grabado desde el Navegador
EJERCICIO TREINTAIOCHO Compruebe el siguiente cdigo que realiza el efecto de que una serie de roll -overs automatizados. <html> <head> <script> var estado=true; function cambio() { estado=!estado; if(estado) { img.src="imagen1.gi f" } else { img.src="imagen2.gif" } setTimeout("cambio()",500); } </script> </head> <body onLoad= cambio(); > <img name="img" src="imagen1.gif"> </body> </html> ADVERTENCIA: debe tener las imgenes imegen1.gif e imagen2.gif preparadas. Grabar como ejercicio38.html y abrir el archivo grabado desde el Navegador
Pag. 32
Manual JavaScript
EJERCICIO TREINTAINUEVE Compruebe el siguiente cdigo que realiza el efecto de que roll -over de una imagen segn se site el ratn en un texto o en otro. <html> <head> <script> function imag(valor) { if(valor==1) img.src="imagen1.gif" else img.src=" imagen2.gif" } </script> </head> <body> <table border="1" width="15% "> <tr>
<td width="100%"><p onMouseOver=imag(1);>IMAGEN 1</td>
</tr> <tr>
</tr> </table> <br> <img name="img" src="imagen1.gif"> </body> </html> ADVERTENCIA: prepare las imgenes que se utilizan.
<td width="100%"><p onMouseOver=imag(2);>IMAGEN 2</td>
Grabar como ejercicio39.html y abrir el archivo grabado desde el Navegador EJERCICIO CUARENTA Compruebe el siguiente cdigo que realiza el efecto de que una imagen vaya cambiando por medio de un control. En este caso una lista ( select). Es igual que en el caso anterior. Lo nico que cambia es el evento que gestiona la llamada a la funcin. <html> <head> <script> function cambio(valor) { img.src=valor+ .gif" } </script> </head>
<body> <select name="lista" onChange=cambio(value);> <option value="imagen1">Imagen 1</option> <option value="imagen2">Imagen 2</option> </select> <br> <img name="img" src="imagen1.gif"> </body> </html> ADVERTENCIA: prepare las imgenes que se utilizan. Grabar como ejercicio40.html y abrir el archivo grabado desde el Navegador EJERCICIO CUARENTAIUNO Compruebe el siguiente cdigo que realiza el efecto de que una movindose en vertical auto mticamente. <html> <head> <script> var vertical=35; var ida=true; function mover( ) { if(vertical<=200 && ida) vertical+=10; else { vertical-=10; ida=false; if(vertical<=35) ida=true; } img.style.top=vertical; setTimeout("mover()",200); } </script> </head> <body onLoad= mover(); > <img name="img" src="imagen1.gif" style="position:absolute; left:12; top:35"> </body> </html> ADVERTENCIA: prepare las imgenes que se utilizan. Grabar como ejercicio41.html y abrir el archivo grabado desde el Navegador
imagen vaya
EJERCICIO CUARENTAIDOS Compruebe el siguiente cdigo que realiza el efecto de imgenes que se intercambian y se mueven en vertical au tomticamente. En este caso utilizamos la creacin de dos objetos de tipo Image para efectuar el programa. <html> <head> <script> //creacin de un primer objeto de tipo Imagen var primera=new Image(); primera.src= imagen2.gif ; //creacin de un segundo objeto de tipo Imagen var segunda=new Image(); segunda.src= imagen2.gif ; var vertical=35; var ida=true; var estado=true; function mover() { estado=!estado; if(estado) img.src=primera.src; else img.src=segunda.src; if(vertical<=200 && ida) vertical+=10; else { vertical-=10; ida=false; if(vertical<=35) ida=true; } img.style.top=vertical; setTimeout("mover()",200); } </script> </head> <body onLoad= "mover()" > <img name="img" src="imagen1.gif" style="position:absolute; left:12; top:35"> </body> </html> ADVERTENCIA: prepare las imgenes que se utilizan. Grabar como ejercicio42.html y abrir el archivo grabado desde el Navegador
Objetos Predefinidos
Cuando se carga un documento en el navegador, se crean automticamente una coleccin de Objetos predefinidos de JavaScript, esta es la jerarqua:
navigator
window frame top self parent
history location toolbar .... document
link anchor layer applet image form elements radio, select, text, textarea, button, submit, reset, password,...
window:
Nos permite definir las caracterstica de la ventana del navegador o de las ventanas que construyamos nuevas. A continuacin tenemos algunos de los mtodos y las propiedades de este objeto. MTODOS open() close() print() alert() confirm() prompt()
showModalDialog()
DESCRIPCI N Abre una nueva ventana Cierra la ventana. Imprime el documento. Abre ventanas alert. Abre ventanas confirm. Abre ventanas prompt. Crea ventana modal.
SINTAXIS
variable =window.open( url , name , atributos ); variable .close(); variable .Print(); variable .alert( datos); variable .confirm(datos); variable .prompt( mensaje , val inici ); variable=window.showModalDialog( url , atributos ); Pag. 36 Manual JavaScript
PROPIEDADES opened closed status
DESCRIPCI N boolean Boolean Texto en barra estado.
SINTAXIS
SI se ha abierto contiene true, sino false SI se ha cerrado contiene true, sino false
variable.status= mensaje ;
La variable solo es necesaria cuando sea una ventana distinta a la del navegador. ATRIBUTOS DE showmodaldialog() ATRIBUTO dialogWidth:valor dialogHeight:valor dialogTop:valor dialogLeft:valor DEFINE: el ancho. el alto. posicin superior posicin inferior.
Todos los atributos que se pongan irn dentro de las comillas y separados por , . Todos son opcionales. ATRIBUTOS DE open() ATRIBUTO toolbar=[yes|no] location=[yes|no] directories=[yes|no] channelmode= [yes|no] menubar=[yes|no] status=[yes|no] scrollbars=[yes|no] resizable=[yes|no] width=pixels height=pixels fullscreen=[yes|no] top=pixels left=pixels ELEMENTO Barra de herramientas. Barra de direcciones. Histrico. Barra de canales. Barra de mens. Barra de estado. Barras de Scroll. Dimensionable. Ancho de ventana. Alto de ventana. Maximizada. Posicin superior. Posicin izquierda
Todos los atributos que se pongan irn dentro de las comillas y separados por , . Todos son opcionales.
Pag. 37
Manual JavaScript
EJERCICIO CUARENTAITRES Compruebe en el siguiente ejemplo la utilizacin del objeto window. <html> <head> <script> var v1; function abre() {
v1.status="Ventana creada para publicidad"; status="Ventana Estandar del Navegador";
v1=window.open("pagina1.htm","v","status=yes,resizable=yes );
} function cierra() { v1.close(); } </script> </head> <body onload=abre(); > <form> <input type="button" value="Cerrar" onClick=cierra(); > </form> </body> </html> Grabar como ejercicio43.html y abrir el archivo grabado desde el Navegador EJERCICIO CUARENTAICUATRO Compruebe en este otro ejemplo la util izacin del objeto window. <html> <head> <script> var v1; function abre() {
} function opera(valor) { switch(valor) { case 1: cargapagina(); break;

Pag. 38
v1=window.open("pagina1.html","","status=yes,resizable=yes );
Manual JavaScript
case 2: print(); break; case 3: var modal; modal=window.showModalDialog("pagina2.html"); break; } } function cargapagina() { var cerrada=v1.closed; if(!cerrada) v1.location="pagina1.htm"; else alert("Error. \nv1 debe estar abierta."); } </script> </head> <body onload=abre(); > <input type="button" value="Cargar onClick=opera(1); > <br> <input type="button" value="Imprime" onClick=opera(2); > <br> <input type="button" value="Modal" onClick=opera(3); > </body> </html> Grabar como ejercicio44.html y abrir el archivo grabado desde el Navegador
document:
Objeto dependiente de window, es quien contiene las propiedades para trabajar con el documento y su contenido, es decir, la pgina web. Sus mtodos pueden ser usados tambin por window. Y estos son con los que normalmente se trabaja.
METODO write() writeln()
DESCRIPCION Escribe en el documento. Escribe y salta de lnea.
SINTAXIS document.write(dato); document.writeln(dato);
Pag. 39
Manual JavaScript
PROPIEDAD linkColor vlinkColor bgColor fgColor referrer location lastModified
DESCRIPCION Color de enlace (activo). Color de enlace (usado). Color de fondo. Color del texto. Url del documento anterior. Url del documento actual. Fecha modificacin.
SINTAXIS document.linkColor= color ; document.vlinkColor= color ; document.bgColor= color ; document.fgColor= color ; var=document.referrer; var=document.location; var=document.lastModified;
EJERCICIO CUARENTAICINCO Compruebe en el siguiente ejemplo la utilizacin del objeto document. <html> <head> <script> function fondo(colores) {document.bgColor=colores;} function texto(colores) {document.fgColor=colores;} </script> </head> <body> COLOR DEL FONDO <br> BLANCO <input type="radio" name="F" onClick=fondo("white"); >
<br>
ROJO<input type="radio" name="F" onClick=fondo("red"); >

<br>
AZUL <input type="radio" name="F" onClick=fondo("blue"); > <br><br> COLOR DEL TEXTO<br> NEGRO<input type="radio" name="T" onClick=texto("black"); >
<br> GRIS<input type="radio" name="T" onClick=texto("gray"); > <br> VERDE <input type="radio" name="T" onClick=texto("green"); >
</body> </html> Grabar como ejercicio45.html y abrir el archivo grabado desde el Navegador
Pag. 40
Manual JavaScript
EJERCICIO CUARENTAISEIS Compruebe en este nuevo ejemplo la utilizacin del objeto document. <html> <head> <script> var v1; function ver() { var fecha; var urlantes; var urlactual; fecha=v1.document.lastModified; urlantes=v1.document.referrer; urlactual=v1.document.location; v1.document.writeln("Cr eada en " +fecha); v1.document.writeln("Direccin " +urlactual); v1.document.write("Url anterior " +urlantes); } function abre() { v1=window.open("pagina1.htm","v","status=yes,resizable=yes ); } </script> </head> <body onLoad= abre();> <form> <input type="button" value="Info. Pag" onClick= ver(); > </form> ............ Grabar como ejercicio46.html y abrir el archivo grabado desde el Navegador
history:
Objeto derivado de window, contiene todas las direcciones q ue se han ido visitando durante la sesin actual. window tambin puede utilizar sus mtodos:
METODO
back() forward()
DESCRIPCI N Retrocede a la url o archivo anterior. Avanza a la url o archivo siguiente. Avanza o retrocede el Negativo: retrocede n de urls indicado en el parmetro. Positivo: avanza
SINTAXIS window.history.back(); window.history.forward();
go(valor)
window.history.go( valor);
Pag. 41
Manual JavaScript
EJERCICIO CUARENTAISIETE Compruebe en este nuevo ejemplo la utilizacin del objeto history. <html> <head> <script> function pasa(valor) { history.go(valor); } </script> </head> <body> <form name= F1 > <input type="button" value="Atrs" onClick=pasa( -1); > <br> <input type="button" value="Adelante" onClick=pasa(1); > <br> Introduce un valor (Para retroceder con el signo -delante): <input type="text" name="Go"> <input type="button" value="Go" onClick=pasa(document.F1.Go.value); > </form> .............. Grabar como ejercicio47.html y abrir el archivo grabado desde el Navegador
navigator:
Objeto que contiene la informacin del navegador que se est utilizando. Todos sus mtodos muestran informacin sin posibilidad de modificarla. Las propiedades ms tiles son: PROPIEDAD appName appVer userLanguaje platform cpuClass connectionSpeed DESCRIPCION Contiene el Nombre del navegador. Contiene la Versin. Contiene el cdigo del Lenguaje. Contiene la plataforma de trabajo. Contiene el tipo de microprocesador Contiene la velocidad de conexin. SINTAXIS var=navigator.appName; var=navigator.appVer; var=navigator.userLanguage; var=navigator.platform; var=navigator.cpuClass; var=navigator.connectionSpeed;
Pag. 42
Manual JavaScript
EJERCICIO CUARENTAIOCHO Compruebe en este ejemplo la utilizaci n del objeto navigator. <html> <head> <script> function informa() { var v1; var nombre; var cpu; var sistema; v1=window.open("","v","width=300 height=150"); v1.document.bgColor="gray"; nombre=navigator.appName; cpu=navigator.cpuClass; sistema=navigator.platform; v1.document.writeln("Navegador: " +nombre); v1.document.writeln("Sistema: " +sistema); v1.document.write("Micro: " +cpu); } </script> </head> <body> <form> <input type="button" value="Info." onClick=informa();> </form> </body> </html> Grabar como ejercicio48.html y abrir el archivo grabado desde el Navegador
screen:
Objeto por el cual podemos conocer la configuracin de tar jeta grfica que tiene el usuario. Lo mismo que en el objeto anterior, no hay posibilidad de modificar la configuracin. Sus mtodos ms importantes son:
MTODO height width colorDepth
DESCRIPCI N Altura de la pantalla. Ancho de la pantalla.
SINTAXIS var=screen.height var=screen.width
Bits por pixel, los colores en var=screen.colorDepth pantalla.

EJERCICIO CUARENTAINUEVE Compruebe en este ejemplo la utilizacin del objeto screen. <html> <head> <script> function resol() { var ancho=screen.width; var alto=screen.height; if(ancho<1800 && alto<1600) { alert("Aumentar Resolucin a 1800x1600"); document.write("Aumente la Resolucin, est trabajando a: "); document.write("Ancho:+ ancho + Al to: + alto"); } } </script> </head> <body onLoad=resol();> .... Grabar como ejercicio49.html y abrir el archivo grabado desde el Navegador
Mtodos para fecha y hora

Mtodos que nos van a permitir realizar una serie de operaci ones o procedimientos utilizando fechas y horas. Lo primero que tendremos que hacer es construir un objeto de tipo Date, para que posteriormente podamos utilizar los mtodos de fecha y hora. SINTAXIS DE LA CONSTRUCCI N DEL OBJETO: var nombre_objeto=new Date(); MTODO objeto.toGMTString(); objeto.getDate(); objeto.getMonth(); objeto.getYear(); objeto.getHours(); objeto.getMinutes(); objeto.getSeconds(); DESCRIPCI N Devuelve un string de la fecha en formato GMT Devuelve la fecha Devuelve el N de mes. (enero es 0, febrero es 1, etc) Devuelve el ao Devuelve la hora Devuelve los minutos Devuelve los segundos
Pag. 44
Manual JavaScript
EJERCICIO CINCUENTA Compruebe la utilizacin de diferentes formas de manipular fechas y horas. <html> <head> <script> function fecha() { var obj_fecha=new Date(); var completo=obj_fecha.toGMTString(); var hora=obj_fecha.getHours(); var minuto=obj_fecha.getMinutes(); var segundo=obj_fecha.getSeconds(); var dia=obj_fecha.getDate() ; var mes=obj_fecha.getMonth()+1; var anis=obj_fecha.getYear(); alert(hora +":" +minuto +":" +segundo); alert(dia +"/" +mes +"/" +anis); alert(completo); } </script> </head> <body onLoad=fecha();> ..... Grabar como ejercicio50.html y abrir el archivo grabado desde el Navegador
EJERCICIO CINCUENTAIUNO Compruebe en el siguiente ejemplo la realizacin de un reloj digital. <html> <head> <script> setTimeout("reloj()",100); function reloj() { var tiempo=new Date(); var hora=tiempo.getHours(); var minuto=tiempo.getMinutes(); var segundo=tiempo.getSeconds(); var textohora=hora+":"+minuto+":"+segundo; document.reloj.caja.value=tex tohora; setTimeout("reloj()",500); } </script>
</head> <body> <form name=reloj > <input type="text" name="caja" size="10"> </form> ..... Grabar como ejercicio51.html y abrir el archivo grabado desde el Na vegador
Mtodos Matemticos
Contiene los mtodos para realizar cualquier tipo de operacin matemtica compleja. Solo necesitamos llamar al mtodo deseado utilizando el objeto Math (ya esta creado). Los mtodos mas tiles son: MTODO var=Math.sin(valor); var=Math.cos(valor); var=Math.tan(valor); asin(),acos(),atan() var=Math.abs(valor); var=Math.log(valor); var=Math.max(val1,val2); var=Math.min(val1,val2); var=Math.pow(base,expon); var=Math.sqrt(valor); var=Math.round(valor); var=Math.random()*interv; DESCRIPCI N Seno de un ngulo. Expresado en radianes. Coseno de un ngulo. Expresado en radianes. Tangente de un ngulo. Expresado en radianes. Iguales a las anteriores pero devuelve arco s. Valor absoluto (su positivo). Logaritmo decimal de valor. Devuelve el mayor de los dos. Devuelve el menor de los dos. Potencia de base Raz cuadrada del valor. Redondea un valor con decimales. Nmero aleatorio entre 0 y el intervalo.
Pag. 46
Manual JavaScript
EJERCICIO CINCUENTAIDOS Compruebe en el siguiente ejemplo la ut ilizacin de mtodos matemticos. <html> <head> <script> function opera(valor) { var resultado; var num1=parseInt(document.F1.cnum1.value); var num2=parseInt(document.F1.cnum2.value); switch(valor) { case 1: resultado=Math.sqrt(Math.abs(num1)); break; case 2: resultado=Math.pow(num1,num2); break; case 3: resultado=Math.max(num1,num2); break; } document.F1.resul.value=resultado; } </script> </head> <body> <form name= F1 > NUM1: <input type="text" name="cnum1" size="5" value="0"> <br> NUM2: <input type="text" name="cnum2" size="5" value="0"> <br> <br>
<input type="button" value="Raiz" onClick=opera(1);> <input type="button" value="Potencia" onClick=opera(2);> <input type="button" value="Mximo" onClick=opera(3);>
<br> <br> Resultado:<input type="text" name="resul" siz e="17"> </form> </body> </html>
Grabar como ejercicio52.html y abrir el arch ivo grabado desde el Navegador

EJERCICIO CINCUENTAITRES Realice el siguiente ejemplo de creacin de nmeros aleatorios entre 1 y 10, para posteriormente intentar acertarlo. <html> <head> <script> var secreto; function genera() { secreto=Math.random()*10; secreto=Math.round(secreto); if(secreto==0) secreto=10; } function juego() { var numero=pa rseInt(document.juego.caja.value); if(numero==secreto) { alert("Muy bien. \n A por otro"); genera(); } else { if(numero<secreto) alert("Es mayor"); else alert("es menor"); } document.juego.caja.focus(); document.juego.caja.value=""; } </script> </head> <body onLoad=genera(); > <form name= juego > NUMERO:<input type="text" name="caja" size="3"> </body> </html>
<input type="button" value ="Compara" onClick=juego();> </form>
Pag. 48
Manual JavaScript
Mtodos para cadenas

Mtodos destinados a realizar operaciones con cadenas de texto. Al igual que las funciones matemticas vamos a necesitar un objeto. En este caso el objeto puede ser una variable normal y corriente que va a contener texto o tambin podramos construir un objeto String. En ambos casos se trabajar del mismo modo. SINTAXIS DEL OBJETO String: var nombre_objeto=new String();
PROPIEDAD Objeto/var.length;
DESCRIPCI N Contiene la longitud de la cadena.
MTODO objeto/var.charAt(indice);
objeto/var.subString(ind1,ind2);
DESCRIPCI N Devuelve el carcter que este en esa posicin. Devuelve una subcadena con el texto comprendido entre los ndices. Devuelve la posicin del carcter buscado. Devuelve -1 si no lo encuentra Reemplaza letr1 por letr2. Devuelve la cadena transformada en minsculas. Devuelve la cadena transformada en maysculas
objeto/var.indexof(caracter);
objeto/var.replace(letr1,letr2);
objeto/var.toLowerCase(); objeto/var.toUpperCase();
EJERCICIO CINCUENTAICUATRO Realice el siguiente programa en el que se solicita una contrasea de un mnimo de 4 caracteres, la pasamos a mayscul as y mostramos la primera letra. Si la contrasea no llega a 4 letras le avisamos del mnimo de letras y volvemos a pedir. <html> <head> <script> function pasa() { var contra=document.pass.T.value; var nletras=contra. length; if(nletras<4) { alert("Mnimo 4 letras");
document.pass.T.value=""; nletras=0; } if(nletras!=0) { contra=contra.toUpperCase(); alert("La primera es: "+contra.charAt(0)); } } </script> </head> <body> <form name= pass > </body> </html>
<input type="password" name="T" size="9" onBlur=pasa();> </form>
Pag. 50
Manual JavaScript

Java Script

Загружено:

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

Оригинальное название

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

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

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

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

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

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

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

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

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

Java Script

Загружено:

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

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

El lenguaje JavaScript

Normas del cdigo en JavaScript

SINTAXIS: alert( texto de la ventana ); alert(variable); alert( texto +variable);

Formas de introducir Scripts en un documento:

2. Mediante el uso de eventos:

3. Teniendo los Scripts en un archivo independiente (*.js)

TIPO Numrico Booleano String

VALORES Cualquier tipo numrico True o False. Texto o letra.

variable+=valor Incrementa el valor de variable

< > <= >= == ! =

<input type="text" name="cedad" size="3"> <input type="button" value="Entrar" onClick=ver ();>

Grabar como ejercicio16.html y abrir el archivo grabado desde el Navegador

<body> ....... <form name= F1 > ESPECIE: </form> .......

<input type="text" name="cespe" size="20" onBlur=especie();>

Grabar como ejercicio17.html y abrir el archivo g rabado desde el Navegador

<a href="#" onMouseOver=mientras();>bucle while</a>

....... Grabar como ejercicio21.html y ejercicio22.html y abrir desde el Navegador

El bucle terminar cuando muestre el 4

Paso de parmetros a funciones

Listas y Listas desplegables ( select)

<p id="TEXTO1" style="position:absolute; top:16; left:12">

<img name="img" src="imagen2.gif" onMouseOut= pasa(2);>

<td width="100%"><p onMouseOver=imag(2);>IMAGEN 2</td>

window frame top self parent

history location toolbar .... document

PROPIEDADES opened closed status

DESCRIPCI N boolean Boolean Texto en barra estado.

v1.status="Ventana creada para publicidad"; status="Ventana Estandar del Navegador";

} function opera(valor) { switch(valor) { case 1: cargapagina(); break;

METODO write() writeln()

DESCRIPCION Escribe en el documento. Escribe y salta de lnea.

SINTAXIS document.write(dato); document.writeln(dato);

PROPIEDAD linkColor vlinkColor bgColor fgColor referrer location lastModified

ROJO<input type="radio" name="F" onClick=fondo("red"); >

SINTAXIS window.history.back(); window.history.forward();

MTODO height width colorDepth

DESCRIPCI N Altura de la pantalla. Ancho de la pantalla.

SINTAXIS var=screen.height var=screen.width

Bits por pixel, los colores en var=screen.colorDepth pantalla.

Mtodos para fecha y hora

Grabar como ejercicio52.html y abrir el arch ivo grabado desde el Navegador

<input type="button" value ="Compara" onClick=juego();> </form>

Grabar como ejercicio53.html y abrir el archivo grabado desde el Navegador

Mtodos para cadenas

DESCRIPCI N Contiene la longitud de la cadena.

<input type="password" name="T" size="9" onBlur=pasa();> </form>

Grabar como ejercicio54.html y abrir el archivo grabado desde el Navegador

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