Anda di halaman 1dari 25

BLOQUE I

FLUJO DE EJECUCIN SECUENCIAL

INICIO

DATOS

FUNCIONES

RESULTADO FIN
JavaScript es un lenguaje de programacin creado por la empresa Netscape. Es el lenguaje de programacin ms utilizado en internet para aadir interactividad a las pginas web No confundir con Java. El Java es un lenguaje de programacin de propsito general como lo son C++ o el Visual Basic. Un programa en JavaScript se integra en una pgina Web (entre el cdigo HTML) y es el navegador quien lo interpreta, es decir, no est compilado. CARACTERSTICAS Moderno Sencillo til Potente: permite la POO (programacin orientada a objetos- se basa en que todos los objetos tienen unas propiedades y unas acciones que puede hacer el objeto.) Es barato: slo necesitamos un editor de textos y un navegador. Es visual: permite la programacin visual (ventanas, botones, colores, formularios, etc.) Por ejemplo una ventana es un objeto que tienen acciones como cerrarse, maximizarse... Tiene las propiedades de altura, anchura... JavaScript es una de las mltiples aplicaciones que han surgido para extender las capacidades del Lenguajes HTML. JavaScript es un lenguaje script orientado a documento. Nunca podr hacer un programa, tan slo podr mejorar la pgina Web. Con JavaScript, por ejemplo, en caso de los formularios comprueba que los datos de entrada que alguien inserta son vlidos. Normas: Todo el cdigo (sentencias) est dentro de funciones, aunque puntualmente podremos introducir funciones predefinidas directamente junto con el cdigo HTML. Las funciones se definen entre las etiquetas <script lenguaje=JavaScript> y </script> (algunos navegadores entienden el javascript si se pone solo <script> </script>)

SINTAXIS BSICA <html> <head> <title></title> <script language=JavaScript> cdigo JavaScript; </script> </head> <body> </body> </html> NORMAS 1- La definicin de funciones debe colocarse entre las etiquetas <head> </head> 2- Las etiquetas <title> no pueden estar colocadas entre las de <script> 3- La llamada a la funcin se hace a travs de un evento de un elemeno del documento o escribiendo la etiqueta <script lenguaje=JavaScript>, el nombre de la funcin y </script> ejemplo de funcin, como las matemticas: f(x)=3x+2; si f(x)=0; 3x+2=0 ; x=2/3 ; f(2/3)=6/3+2; f(2/3)=4 Una funcin tambin es un algoritmo. QU ES UN ALGORITMO? Secuencia de instrucciones que se ejecutan en un intervalo finito de tiempo, de forma automtica. USO DE FUNCIONES Las funciones son un conjunto de sentencias (bloque de cdigo) terminadas en ; que especifica al programa las operaciones a realizar. Son tiles para evitar la repeticin de lneas y fomentan el diseo modular del cdigo. Para trabajar en ellas hay que hacer dos cosas: Definirlas (cmo se hace algo) Llamarlas cuando lo necesitemos (invocar la funcin, que es escrita una sola vez, y que haga lo que hemos definido) SINTAXIS <html> <head> <title></title> <script language=JavaScript> function nombre_funcin([var1, var2,... varN]) { sentencias(s); } </script> </head> <body> </body> </html> LLAMADA A UNA FUNCIN 1 MANERA <html> <head> <title></title>

<script language=JavaScript> function nombre_funcin([var1, var2,... varN]) { sentencias(s); } </script> </head> <body> <etiqueta evento=nombre_funcin([var1, var2,...varN]);> </body> </html> 2 MANERA <html> <head> <title></title> <script language=JavaScript> function nombre_funcin([var1, var2,... varN]) { sentencias(s); } </script> </head> <body> <script language=JavaScript> nombre_funcin([var1, var2,...varN]); </script> </body> </html>

LA VENTANA ALERT se trata de una ventana estndar que usa unos para mostrar informaicn en patnalla. Se puede mostrar texto, variables y texto en conjunto con variables. El diseo de la ventana ya est definido lo nico que podemos hacer es mostrar la informacioo una o varias lneas. SINTAXIS 1 opcin alert (texto que queramos visualizar); 2 opcin alert(variable); 3 opcin alert(texto+variable); Este cdigo se inserta como cdigo JavaScript dentro del documento HTML o de una funcin.

Ventana Alert. Genera una pgina HTML (que contenga un prrafo) en la qe se defina una funcin cuyo nombre es hola que al ejecutarse muestre el mensaje Hola Mundo!. Esta funcin se ejecutar justo despus de que se procese la etiqueta BODY. La cual guardamos como .html <html> <head> <title></title> <script language="JavaScript"> function hola() { alert("Hola Mundo"); } </script> </head> <body> <script language="JavaScript"> hola(); </script> <p>Este es el primer programa que desarrollamos con JavaScript</p> </body> </html> Ventana Alert. Genera una pgina HTML (que contenga un prrafo) en la que se defina dos funciones: la primera tendr por nombre Hola y se ejecutar al abrir la pgna haciendo uso del evento onLoad y mostrar un mensaje de bienvenida a los usuarios que visiten nuestra pgina. La segunda funin se llamar adis, mostrar un mensaje de despedida y se ejecutar cuando el usuario vaya a cerrar la pgina usando para ello el evento onUnLoad (cuando se actualiza la pgina). Los eventos deben especificarse en la etiqueta BODY. Guardamos como .html <html> <head> <title></title> <script language="JavaScript"> function hola() { alert("Bienvenido a nuestra pgina"); } function adios() { alert("Hasta pronto"); } </script> </head> <body onLoad=hola(); onUnLoad=adios();> <p>Este es el primer programa que desarrollamos con JavaScript</p> </body> </html>

Ventana Alert. Modifica la prctica anterior creando una nueva funcin que se llame como_estas que pregunte al usuario qu tal estas? Esta funcin debe llamarse desde la funcin hola, y debe ejecutarse justo despus de la ventana de bienvenida. La cual guardamos como .html <html> <head> <title></title> <script language="JavaScript"> function hola() { alert("Bienvenido a nuestra pgina"); como_estas(); } function adios() { alert("Hasta pronto"); } function como_estas () { alert("Qu tal ests?") } </script> </head> <body onLoad=hola(); onUnLoad=adios();> <p>Este es el primer programa que desarrollamos con JavaScript</p> </body> </html>

EVENTOS
Un evento es un mecanismo por el cual podemos detectar las acciones que realiza el usuario y llamar a la funcin que tengamos asociada. Desde esta funcin realizamos las acciones que tengamos desarrolladas. Los eventos ms utilizados son: SE PRODUCE AL.. EVENTO onLoad onUnLoad onAbort onBlur onError onMouseOver onMouseOut Terminar de cargar una pgina o frame (entrar). Descargar una pgina o frame (salir). Abortar la carga de una pgina. Un elemento de formulario, una ventana o un marco pierden el foco La carga de un documento o imagen produce un error Pasar el ratn por encima de un enlace, rea o frame. Dejar de estar el ratn encima de un enlace, rea o frame.

onMouseMove Mover el ratn por el documento. onMouseDown El usuario pulsa un botn del ratn onMouseUp onKeyUp onKeyDown onKeyPress onDragDrop onDblClick onClick onResize onMove onChange onSelect onFocus onSubmit onReset El usuario libera un botn del ratn El usuario libera una tecla El usuario pulsa una tecla El usuario mantiene pulsada una tecla El usuario arrastra y suelta un objeto en la ventana (no en Mac) Se hace click doble en un objeto o formulario Cuando se hace click con el ratn. Dimensionar la ventana del navegador. Mover la ventana del navegador. Modificar texto en un control de edicin (cuadro de texto de un formulario). Sucede al perder el foco. Seleccionar texto en un control de edicin (cuadro de texto de un formulario). Situar el cursos/ratn en un control (elemento del formulario). Enviar un formulario. Inicializar un formulario.

Crea una pgina web, que contenga un botn y dos cuadros de texto. Cuando el usuario pulse el botn debe aparecer vuestro nombre, si se sita en el cursor sobre el primer cuadro deber emerger una ventana indicndoselo, cada vez que pulse una letra en el segundo cuadro debe emerger otra indicndole que acaba de pulsar una tecla y para terminar cada vez que el usuario intente cambiar las dimensiones de la ventana, otro mensaje debe de advertir lo que est haciendo.

<html> <head> <title></title> <script language="JavaScript"> function nombre() { alert("Mi nombre es Patricia"); } function advert() { alert("Acabas de hacer pasar por encima"); } function ventana() { alert("Acabas de poner una letra"); } </script> </head> <body> <form method="post" action="mailto:#"> <input type="button" value="Si queres saber mi nombre pulsa" onClick=nombre();> <br> <input type="text" name="nombre" onMouseOver=advert();> <br> <input type="text" name="escribir" onKeyPress=ventana();> </form> </body> </html> VARIABLES Y CONSTANTES Una variable es un espacio de memoria con un nombre reservado para guardar la informacin mientras la pgina est cargada. (Un cajoncito que reservamos en algn sitio para guardar algo) El primer paso para poder trabajar con variables declaradas, que es el lugar donde se les da su nombre y se define su mbito de accin. Para dar nombre a una variable debemos tener en cuenta las siguientes normas: No pueden contener espacios Distingue entre maysculas y minsculas, es decir, la variable Numero es distinta a la variable numero. Podemos juntar las palabras capitalizadas (ms recomendado). Ejemplo: onLoad. No pueden contener acentos, puntos o cualquier signo gramatical (barra baja s) No pueden comenzar con un dgitos ni contener la letra . El nombre es nico y exclusivo para cada variable salvo que se definan dos variables distintas con el mismo nombre en 2 funciones distintas. El mbito de accin de una variable define si la variable se podr utilizar en cualquier parte del documento / pgina (es global), o si solo se podr utilizar dentro de una funcin determinada (es local). La sintaxis para declarar una variable es igual en ambos casos, la nica diferencia es el lugar donde declaramos.

SINTAXIS
var nombre_variable; var nombre_variable=valor; La asignacin de valor es opcional, aunque intentaremos utilizarla en casi todas las declaraciones para inicializarlas. La declaracin de las variables globales se realiza dentro de la etiqueta: <script language=JavaScript> (pero fuera de cualquier funcin) SINTAXIS VARIABLES GLOBALES <html> <head> <title></title> <script language="JavaScript"> var variable_uno=valor; var variable_dos=valor; function uno() { ; } function dos() { ; } </script> </head> <body> Cdigo HTML </body> </html> SINTAXIS VARIABLES LOCALES <html> <head> <title></title> <script language="JavaScript"> function uno() { var variable_uno=valor; var variable_dos=valor; Cdigo de la funcion uno; } function dos() { var variable_uno=valor; var variable_dos=valor; Cdigo de la funcion dos; }

</script> </head> <body> Cdigo HTML </body> </html> El tipo de dato que almacenar la variable es asignado automticamente por JavaScript. Depende del primer valor que se guarde en la variable. Tipos de variables: TIPO VALORES Numrica Boolean String Cualquier tipo de nmero True or False Texto o letra

Para visualizar el valor almacenado por una variable mediante una ventana alert basta con escribir el siguiente cdigo alert (Texto1+variable+Texto2+variable2+...); Los String se denotan por comillas dobles o comillas simples, pero no ambas a la vez. Es decir: var variable1=Pepito; var variable2='Paquito'; Habitualmente se aaden los String caracteres de control que permiten formatear el texto, los ms usados son: \n salto de linea \t tabulador Por ejemplo: var Variable1 = Pepito \n, /* Escribir Pepito y un salto de lnea, de forma que lo siguiente que se escriba aparecer en la siguiente lnea*/ var Variable2 = \t Paquito; /* Escribir una tabulacin y a continuacin el contenido de la variable */ Prctica 1: Escribe un programa que conste de una funcin que se llamar datos_personales y que al pulsarle salgan tus datos personales. <html> <head> <title></title> <script language="JavaScript"> function datos_personales() { var nombre="Patricia Fernndez Cardero"; var edad=19; alert("Nombre: \t"+nombre+"\nEdad: \t"+edad); } </script> </head> <body> <form method="post" action="mailto:#"> <input type="button" value="Datos Personales" onClick=datos_personales();> </form> </body>

</html> PRACTICA 2: haz una pgina que al abrirla de la bienvenida y tenga un botn que al pulsarlo muestre los datos de la pgina web (nombre de administrador, fecha, correo electrnico) <html> <head> <title></title> <script language="JavaScript"> function hola() { alert("Bienbenidos a mi pagina Web"); } function datos_web() { var nombre="Patricia Fernandez Cardero"; var edad=19; var fecha="10/04/2012"; var email="patry_mr93@hotmail.com"; alert("---------------------------------------------"+"\n|Web Master: \t"+nombre+"\n|Edad: \t"+edad+"\n|Fecha de creacion: \t"+fecha+"\n|E-mail: \t"+email+"\n----------------------------------------------"); } </script> </head> <body onLoad=hola();> <form method="post" action="mailto:#"> <!-- pgina que al abrirla de la bienvenida y tenga un botn que al pulsarlo muestre los datos de la pgina web (nombre de administrador, fecha, correo electrnico) --> <input type="button" value="Datos de la Web" onClick=datos_web();> </form> </body> </html>

OPERADORES
JavaScript define TRES tipos de operadores: aritmticos, relacionales y lgicos Tambin hay definido un operador para realizar determinadas tareas como las (falta) OPERADORES-ASIGNACIN (=) En JavaScript se puede utilizar el operador de asignacin en cualquier expresin vlida. Slo 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 vlida (constante, variable o expresin). Es posible realizar asignaciones mltiples, igualar variables entre s y a un valor. EQUIVALE A OPERADOR DESCRIPCIN = += -= *= /= %= Asignacin x+=y x-=y x*=y x/=y x%=y x=y x=x+y x=x-y x=x*y x=x/y x=x%y

SINTAXIS variable=valor; variable=variable1; variable=variable1=variable2=variableN=valor; EJEMPLO: MODIFICAR EL VALOR DE LAS VARIABLES NOMBRE Y EDAD (solo se pone var una vez para definir la misma variable. Las variables siempre al comienzo de la funcin) <html> <head> <title></title> <script language="JavaScript"> function datos_personales() { var nombre="Patricia Fernndez Cardero"; var edad=19; alert("Nombre: \t"+nombre+"\nEdad: \t"+edad); alert("Cambios los valores anteriores"); nombre="Patricia"; edad=20; alert("Nombre: \t"+nombre+"\nEdad: \t"+edad); } </script> </head> <body> <form method="post" action="mailto:#"> <input type="button" value="Datos Personales" onClick=datos_personales();> </form> </body> </html> OPERADORES ARITMTICOS Pueden aplicarse a todo tipo de expresiones Son utilizados para realizar operaciones matemticas sencillas, aunque unindolos se puede realizar cualquier tipo de operacin:

OPERADOR + * / % N e N Raz cuadrada

DESCRIPCIN Resta Suma Multiplicacin Divisin Resto de una divisin. Ejemplo: resto de 10 dividido entre 3: 10%2
Math.e Math.pi Math.sqrt()

Para realizar las dems races tenemos que considerarlas potencias y fracciones.
Math.pow(n1, n)

Logaritmo en base 2 Logaritmo en base 10 Logaritmo en base 2 de e Math.abs(valor); Math.cos(valor); Math.log(valor); Math.max(val1,val2,val3, ); Math.min(val1,val2,val3, ); Math.pow(base,exponte); Math.random()*interv; Math.random(y-x) *Math.random()+x Math.round(valor); Math.sin(valor); Math.tan(valor); -++ vari+=valor vari-=valor vari*=valor

Math.ln2 Math.ln10 Math.log2e

Logaritmo en base 10 de e Math.log10e Valor absoluto. Coseno de un ngulo (radianes). Logaritmo decimal de valor. Devuelve el mayor de los nmeros en la lista. Devuelve el menor de los nmeros en la lista. Base exponente Nmero aleatorio entre 0 y el intervalo. Nmero aleatorio entre x e y. Por ejemplo entre 10 y 34 (x=10 e y=34). Redondea un valor con decimales. Seno de un ngulo (radianes). Tangente de un ngulo (radianes). Decremento en 1 Incremento en 1 Incrementa el valor de vari Decrementa el valor de vari Multiplica el valor de vari

OPERADORES LGICOS Y RELACIONALES Los operadores relacionales hacen referencia a la relacin entre unos valores y otros. Los lgicos se refieren a la forma en que esas relaciones pueden conectarse entre s. OPERADORES RELACIONALES OPERADOR < > <= >= == != DESCRIPCIN Menor que Mayor que Menor o igual que Mayor o igual que Igual distinto OPERADORES LGICOS OPERADOR && || DESCRIPCIN Y (AND) O (OR) NO (NOT) (el resultado es verdadero si ambas expresiones son verdaderas) (el resultado es verdadero si alguna expresin es verdadera) (el resultado invierte la condicin de la expresin) El operador lgico OR x true true y true resultado true

El operador lgico AND x true true y true resultado true

false false false

false true true

false true

false true

false false false

false false false El operador lgico NOT x true resultado false

false true Los operadores AND y OR combinan expresiones relacionales cuyo resultado viene dado por la ltima columna de sus tablas de verdad. Por ejemplo:
(a<b) && (b<c)

es verdadero (true), si ambas son verdaderas. Si alguna o ambas son falsas el resultado es falso (false).

En cambio, la expresin:
(a<b) ||(b<c)

Es verdadera si una de las dos comparaciones lo es. Si ambas, son falsas, el resultado es falso. - La expresin " NO a es menor que b"
!(a<b)

Es falsa si (a<b) es verdadero, y es verdadera si la comparacin es falsa. Por tanto, el operador NOT actuando sobre (a<b) es equivalente a
(a>=b)

La expresin "NO a es igual a b"


!(a==b)

Es verdadera si a es distinto de b, y es falsa si a es igual a b. Esta expresin es equivalente a


(a!=b)

INTRODUCCIN DE DATOS
JavaScript permite 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:
variable=prompt(texto 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 contendido de la caja se pierde y variable queda con valor null. <html> <head> <title></title> <script language="JavaScript"> function pregunta_nombre() { var nombre; var edad; nombre=prompt("Introduce tu Nombre:","Nombre"); edad=prompt("Introduce tu Edad:","Edad") alert("Hola \t"+nombre); alert("Tu edad es: \t"+edad); edad=edad+5; alert("Dentro de cinco aos tu edad ser: \t"+edad); } </script> </head> <body onLoad=pregunta_nombre();> </body> </html>

CAJA DE TEXTO
Otro mecanismo por el cual se pueden introducir datos, es mediante las cajas de texto, son los Estas variables no hay que declararlas, de hecho cuando introducimos el cuadro de texto, a

la vez declaramos dichas variables. Ahora bien, la forma de acceder el contenido Hay que destacar que estas variables son de tipo String (cadena), por lo que solo van a recoger y recibir datos de este tipo, nunca enteros, como muchos dgitos, es decir por ejemplo la cadena 98 que es distinto del nmero 98. Debido a esto se hace necesario el uso de unas funciones predefinidas por JavaScript que facilitan la conversin. DESCRIPCIN FUNCIN De texto a nmero entero Var_numerica=parseInt(var_texto); De texto a coma flotante (decimal) Var_numerica=parseFloat(var_texto); Enva el cursor a la caja Nombre_caja.focus(); Escribe un programa similar al anterior en el que aparezca un cuadro de texto y un botn de procesamiento de datos. Dentro de la caja debe aparecer la frase Escribe aqu tu edad, y el usuario introducir la edad. Cuando el usuario active el botn de procesado de datos el programa mostrar la ventana alert indicndole el ao aproximado de su nacimiento (ya que esto depende de los meses). Una vez que se acepte la ventana, el cursor debe volver a la caja y en la misma debe aparecer la frase de antes, Escribe aqu tu edad. <html> <head> <title></title> <script language="JavaScript"> function datos_personales() { var edad=parseInt(cajaNum.value); var ao_nacimiento;

alert("Edad: \t"+edad); ao_nacimiento= 2012 - edad; alert("Naciste en el ao: \t"+ao_nacimiento); cajaNum.value="Escribe aqu tu Edad"; cajaNum.select(); cajaNum.focus(); } </script> </head> <body onLoad=cajaNum.focus();> <b>Edad:</b><input type="text" name="cajaNum" value="Escribe aqu tu edad" size="30"> <br> <input type="button" value="Procesar" onClick=datos_personales();> </body> </html>

EJERCICIOS PDF
2 Ejercicio. <html>

<head> <title></title> <script language="JavaScript"> function calculo() { var n1; var n2; var resultado; n1 = parseInt(cajaNum1.value); n2 = parseInt(cajaNum2.value); resultado= n1 / n2; alert("El resultado es: \t"+resultado); } </script> </head> <body> <b>Primer Nmero:</b><input type="text" name="cajaNum1" size="30"> <br> <b>Segundo Nmero:</b><input type="text" name="cajaNum2" size="30"> <br> <input type="button" value="Procesar" onClick=calculo();> </body> </html>

IMPORTANTE!! Declarar todas las variables, incluso las que hacen operaciones matemticas.

BLOQUE II
ESTRUCTURAS DE PROGRAMACIN. SENTENCIAS DE CONTROL.

INICIO INSERTAR DATO CONDICIN SI NO CONDICIN

SI

NO

FIN
En este bloque se van a utilizar sobre todo los operadores lgicos y relacionales

Es la manera que tiene JavaScript de provocar que el flujo de la ejecucin avance y se ramifique en funcin de los cambios y estados de los datos y/o acciones del usuario. El flujo de ejecucin ser secuencial pero con eleccin a que ocurran unas opciones u otras. Siempre habr algn bloque de sentencias que no se ejecute. Los corchetes significan que son opcionales, pero no se ponen, no siempre hay parte else, habr ciertos programas que no querremos hacer nada si no se cumple una condicin. Las llaves son obligatorias cuando hay ms de una sentencia. Pero para nosotros es obligatorio. SINTAXIS IF-ELSE: If (expresin-booleana) { Sentencia(s); } [Else { Sentencia(s); }]

Se pueden anidar varias estructuras IF..ELSE. Sentencia de control SWITCH: para realizar comprobaciones mltiples tenido en cuenta el valor de una expresin. 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); } Sentencia de control FOR: para realizar bucles (repeticiones) de forma muy sencilla. for (inicializacin;condicin_de_fin;iteracin) { sentencia(S); } Sentencia de control WHILE: permite crear bucles que se ejecutan una o ms veces, dependiendo de la condicin indicada. Mientras se cumpla la condicin (o condiciones) dadas, se ejecutan las instrucciones y se vuelve a comprobar la condicin. while (condicin condiciones) { cuerpo; }

Sentencia de control DO-WHILE: similar al while, pero 1 ejecuta las sentencias del cuerpo y luego comprueba la condicin. Do { cuerpo_del_bucle; } while(condicin); MTODOS PARA CADENAS: Todos estos mtodos son funciones que retornan una cadena de texto o un carcter (dependiendo de la funcin) excepto las funciones lenght e indexof que devuelve un nmero. MTODO texto.length; texto.charAt(indice); texto.subString(ind1,ind2); texto.indexof(letra); texto.replace(letr1,letr2); texto.toLowerCase(); texto.toUpperCase(); DESCRIPCIN Devuelve la longitud de la cadena. Devuelve la letra que este en la posicin del ndice. Devuelve el texto comprendido entre los ndices. Devuelve el ndice de la letra buscada. Reemplaza letr1 por letr2. Transforma en minsculas el texto. Transforma en maysculas el texto

Los valores que retornan estos mtodos (los matemticos y los de cadena) Deben cargarse/asignarse a una variable del mismo tipo que el valor retornado. Habr veces que utilizaremos la misma variable que pasamos como parmetro para asignarla el valor devuelto por la funcin, es decir: texto=texto.toUpperCase(); Esta instruccin transforma la cadena almacenada en texto a Maysculas y despus lo almacena en la misma variable texto. APLICACIONES JAVASCRIPT. ANIMACIONES. ESTILOS SINTAXIS style=Position:absolute;top:pos;left:pos style=color:nombre_color style=visibility:hidden o visible FUNCIN setTimeout. setTimeout(nombre_funcin(),intervalo_en_milisegundos); DESCRIPCIN Posibilita el cambio de posicin. Posibilita el cambio de color. Posibilita ocultar y mostrar.

MS ELEMENTOS
Otro de los elementos de un programa JavaScript son los de entrada y salida. En este caso: document.write(""); Funciona de manera parecida que un alert, pero la informacin entrecomillada aparece escrita en la pgina web. EJEMPLO <html> <head> <title></title> <script language="JavaScript"> function acceso() { var edad; edad=parseInt(prompt("Introduce tu edad","")); if (edad<18) { alert ("No puedes tener acceso a la pgnia. \n Espera a tener los 18."); } else { document.write("Has podido acceder a nuestra pgina, bienvenido"); } } </script> </head> <body onLoad=acceso();> </body> </html>

EJEMPLOS
Programa que pida al usuario su edad y si es menor de edad muestra un alert informando que no se puede mostrar la pgina. <html> <head> <title></title> <script language="JavaScript"> function acceso() { var edad; edad=parseInt(prompt("Introduce tu edad","")); if (edad<18) { alert ("No puedes tener acceso a la pgnia. \n Espera a tener los 18."); } } </script> </head> <body onLoad=acceso();> </body> </html> Programa que pida al usuario la edad y si es mayor ponga un mensaje de bienvenido a mi pgina. <html> <head> <title></title> <script language="JavaScript"> function acceder() { var edad; edad=parseInt(prompt("Introduce tu edad","")); if (edad<18){ alert ("No puedes tener acceso a la pgnia. \n Espera a tener los 18."); } else { alert ("Bienvenido a mi pgina.") } } </script> </head> <body onLoad=acceder();> </body> </html>

Realiza un programa similar pero que en el caso de que el usuario sea menor de edad adems de no dejarte la entrada a la pgina le diga cuntos aos tiene que esperar para acceder al contenido de la pgina. <html> <head> <title></title> <script language="JavaScript"> function acceder() { var edad; var diferencia; edad=parseInt(prompt("Introduce tu edad","")); diferencia=18-edad; if (edad<18){ alert ("No puedes tener acceso a la pgnia. \n Espera a tener los 18."); alert ("Te quedan "+diferencia+" aos para poder entrar"); } else { alert ("Bienvenido a mi pgina.") } } </script> </head> <body onLoad=acceder();> </body> </html>

PROBLEMA 1- realiza un programa que mediante una caja de texto se solicite la edad al usuario y cuando se quite el ratn de la caja (evento) se lance una funcin que diga el tipo de abono de ftbol que se le debe vender al usuario. Si es menor de 18, abono joven, si es mayor de 65, abono de 3 edad, y en cualquier otro caso abono normal. <html> <head> <title></title> <script language="JavaScript"> function abono() { var edad; edad=parseInt(cajaEdad.value); if (edad<18) { alert ("Te corresponde el Abono Joven"); cajaEdad.value=""; } else { if (edad>=65) { alert ("Te corresponde el Abono de 3 Edad"); cajaEdad.value=""; } else { alert ("Te corresponde el Abono Normal"); cajaEdad.value=""; } } } </script> </head> <body onLoad=acceder();> <center> <table border=2> <tr> <th>Abono de Ftbol adecuado para cada edad. <tr> <td> Edad:<input type="text" name="cajaEdad" value="escribe tu edad y quita el cursor de la caja" size=45 onMouseOut=abono();> </table> </center> </body> </html>

PROBLEMA 2 un programa que pida dos nmeros con prompt y te diga si son iguales o no y si son iguales qu numero es. Para que comparen dos nmeros utilizamos == <html> <head> <title></title> <script language="JavaScript"> function comparar() { var Numero1; var Numero2; Numero1=parseFloat(prompt("Escribe el Primer Nmero","")); Numero2=parseFloat(prompt("Escribe el Segundo Nmero","")); if (Numero1 != Numero2) { alert ("Ambos Nmeros son distintos"); } else { alert ("Ambos Nermos son iguales y son el nmero: "+Numero1); } } </script> </head> <body onLoad=comparar();> </body> </html> PROBLEMA 3 Escribe un programa que pida un nmero al usuario y diga si es par o impar. <html> <head> <title></title> <script language="JavaScript"> /* Escribe un programa que pida un nmero al usuario y diga si es par o impar */ function comparar() { var Numero1; var resto; Numero1=parseFloat(prompt("Escribe el Un Nmero","")); resto=Numero1%2; if (resto == 0) { alert ("El nmero es Par"); } else { alert ("El Nmero es Impar"); } } </script> </head> <body onLoad=comparar();> </body> </html> EJERCICIO 1

<html> <head> <title></title> <script language="JavaScript"> /* escribe un programa que pida dos nmeros al usuario y lance una ventana alert en la que aparezcan los dos nmero e indique cual es el mayor */ function maximo() { var n1; var n2; n1=parseFloat(cajan1.value); n2=parseFloat(cajan2.value); if (n1>n2){ alert("El mayor de los nmeros "+n1+" y "+n2+" es: "+n1); } else { if (n2>n1) { alert("El mayor de los nmeros "+n1+" y "+n2+" es: "+n2); } else { [if (n1==n2){ alert("Los nmeros son iguales"); NO ES NECESARIO, PORQUE NO HAY MS POSIBILIDADES, HAY QUE OPTIMIZAR }]
CDIGO.SOLO SERA PONER EL ELSE Y EL ALERT

} } } </script> </head> <body> <center> <table border=2> <tr> <td><b>Introduce el primer nmero</b>: <td><b>Introduce el segundo nmero</b>: <tr> <td><input type="text" name="cajan1"> <td><input type="text" name="cajan2"> <tr> <td colspan=2 align="center"><input type="button" value="Resultado" onClick=maximo();> </table> </center> </body> </html>