BLOQUE I

FLUJO DE EJECUCIÓN SECUENCIAL

INICIO

DATOS

FUNCIONES

RESULTADO FIN
JavaScript es un lenguaje de programación creado por la empresa Netscape. Es el lenguaje de programación más utilizado en internet para añadir interactividad a las páginas web No confundir con Java. El Java es un lenguaje de programación de propósito general como lo son C++ o el Visual Basic. Un programa en JavaScript se integra en una página Web (entre el código HTML) y es el navegador quien lo interpreta, es decir, no está compilado. CARACTERÍSTICAS  Moderno  Sencillo  Útil  Potente: permite la POO (programación orientada a objetos- se basa en que todos los objetos tienen unas propiedades y unas acciones que puede hacer el objeto.)  Es barato: sólo necesitamos un editor de textos y un navegador.  Es visual: permite la programación 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 múltiples 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 sólo podrá mejorar la página Web. Con JavaScript, por ejemplo, en caso de los formularios comprueba que los datos de entrada que alguien inserta son válidos. Normas:  Todo el código (sentencias) está dentro de funciones, aunque puntualmente podremos introducir funciones predefinidas directamente junto con el código 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 BÁSICA <html> <head> <title></title> <script language=”JavaScript”> código JavaScript; </script> </head> <body> </body> </html> NORMAS 1- La definición 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 función se hace a través de un evento de un elemeno del documento o escribiendo la etiqueta <script lenguaje=”JavaScript”>, el nombre de la función y </script> ejemplo de función, como las matemáticas: 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 función también es un algoritmo. ¿QUÉ ES UN ALGORITMO? Secuencia de instrucciones que se ejecutan en un intervalo finito de tiempo, de forma automática. USO DE FUNCIONES Las funciones son un conjunto de sentencias (bloque de código) terminadas en ; que especifica al programa las operaciones a realizar. Son útiles para evitar la repetición de líneas y fomentan el diseño modular del código. Para trabajar en ellas hay que hacer dos cosas:  Definirlas (cómo se hace algo)  Llamarlas cuando lo necesitemos (invocar la función, que es escrita una sola vez, y que haga lo que hemos definido) SINTAXIS <html> <head> <title></title> <script language=”JavaScript”> function nombre_función([var1, var2,... varN]) { sentencias(s); } </script> </head> <body> </body> </html> LLAMADA A UNA FUNCIÓN 1º MANERA <html> <head> <title></title>

2º opción alert(variable).varN]).varN]). } </script> </head> <body> <etiqueta evento=nombre_función([var1. var2.. var2. 3º opción alert(“texto+variable”)...<script language=”JavaScript”> function nombre_función([var1. variables y texto en conjunto con variables. varN]) { sentencias(s). El diseño de la ventana ya está definido lo único que podemos hacer es mostrar la informacioo una o varias líneas. ..> </body> </html> 2º MANERA <html> <head> <title></title> <script language=”JavaScript”> function nombre_función([var1... Este código se inserta como código JavaScript dentro del documento HTML o de una función..... varN]) { sentencias(s). } </script> </head> <body> <script language=”JavaScript”> nombre_función([var1. Se puede mostrar texto.. </script> </body> </html> LA VENTANA ALERT se trata de una ventana estándar que usa unos para mostrar informaicón en patnalla.. var2. SINTAXIS 1º opción alert (“texto que queramos visualizar”). var2.

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

} function adios() { alert("Hasta pronto"). como_estas(). La cual guardamos como .> <p>Este es el primer programa que desarrollamos con JavaScript</p> </body> </html> .Ventana Alert.html <html> <head> <title></title> <script language="JavaScript"> function hola() { alert("Bienvenido a nuestra página"). onUnLoad=adios(). } function como_estas () { alert("¿Qué tal estás?") } </script> </head> <body onLoad=hola(). Modifica la práctica anterior creando una nueva función que se llame “como_estas” que pregunte al usuario “¿qué tal estas?” Esta función debe llamarse desde la función hola. y debe ejecutarse justo después de la ventana de bienvenida.

. Desde esta función realizamos las acciones que tengamos desarrolladas. cada vez que pulse una letra en el segundo cuadro debe emerger otra indicándole que acaba de pulsar una tecla y para terminar cada vez que el usuario intente cambiar las dimensiones de la ventana. una ventana o un marco pierden el foco La carga de un documento o imagen produce un error Pasar el ratón por encima de un enlace. Descargar una página o frame (salir). área o frame. Los eventos más utilizados son: SE PRODUCE AL. Crea una página web. EVENTO onLoad onUnLoad onAbort onBlur onError onMouseOver onMouseOut Terminar de cargar una página o frame (entrar). Sucede al perder el foco. . Un elemento de formulario. Dimensionar la ventana del navegador. si se sitúa en el cursor sobre el primer cuadro deber emerger una ventana indicándoselo. Seleccionar texto en un control de edición (cuadro de texto de un formulario). otro mensaje debe de advertir lo que está haciendo. Situar el cursos/ratón en un control (elemento del formulario). onMouseDown El usuario pulsa un botón del ratón onMouseUp onKeyUp onKeyDown onKeyPress onDragDrop onDblClick onClick onResize onMove onChange onSelect onFocus onSubmit onReset El usuario libera un botón del ratón 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 ratón. Enviar un formulario. Modificar texto en un control de edición (cuadro de texto de un formulario). que contenga un botón y dos cuadros de texto. Cuando el usuario pulse el botón debe aparecer vuestro nombre. Inicializar un formulario. Abortar la carga de una página. área o frame. Dejar de estar el ratón encima de un enlace.EVENTOS Un evento es un mecanismo por el cual podemos detectar las acciones que realiza el usuario y llamar a la función que tengamos asociada. Mover la ventana del navegador. onMouseMove Mover el ratón por el documento.

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

} </script> </head> <body> Código HTML </body> </html> SINTAXIS VARIABLES LOCALES <html> <head> <title></title> <script language="JavaScript"> function uno() { var variable_uno=valor. var variable_dos=valor. } . var nombre_variable=valor. … Código de la funcion uno. … function uno() { . aunque intentaremos utilizarla en casi todas las declaraciones para inicializarlas. La asignación de valor es opcional. var variable_dos=valor. var variable_dos=valor. … Código de la funcion dos.SINTAXIS var nombre_variable. } function dos() { var variable_uno=valor. } function dos() { . La declaración de las variables globales se realiza dentro de la etiqueta: <script language=”JavaScript”> (pero fuera de cualquier función) SINTAXIS VARIABLES GLOBALES <html> <head> <title></title> <script language="JavaScript"> var variable_uno=valor.

los más usados son: \n salto de linea \t tabulador Por ejemplo: var Variable1 = “Pepito \n”. } </script> </head> <body> <form method="post" action="mailto:#"> <input type="button" value="Datos Personales" onClick=datos_personales(). Habitualmente se añaden los String caracteres de control que permiten formatear el texto. var edad=19. var variable2='Paquito'. /* Escribirá Pepito y un salto de línea. de forma que lo siguiente que se escriba aparecerá en la siguiente línea*/ var Variable2 = “\t Paquito”. /* Escribirá una tabulación y a continuación el contenido de la variable */ Práctica 1: Escribe un programa que conste de una función que se llamará datos_personales y que al pulsarle salgan tus datos personales. Los String se denotan por comillas dobles o comillas simples.). alert("Nombre: \t"+nombre+"\nEdad: \t"+edad).> </form> </body> .</script> </head> <body> Código HTML </body> </html> El tipo de dato que almacenará la variable es asignado automáticamente por JavaScript. pero no ambas a la vez.. Depende del primer valor que se guarde en la variable. Tipos de variables: TIPO VALORES Numérica Boolean String Cualquier tipo de número True or False Texto o letra Para visualizar el valor almacenado por una variable mediante una ventana alert basta con escribir el siguiente código alert (“Texto1”+variable+”Texto2”+variable2+.. <html> <head> <title></title> <script language="JavaScript"> function datos_personales() { var nombre="Patricia Fernández Cardero". Es decir: var variable1=”Pepito”.

> <form method="post" action="mailto:#"> <!-.  Sólo con utilizar un signo de igualdad se realiza la asignación. } function datos_web() { var nombre="Patricia Fernandez Cardero".> </form> </body> </html> OPERADORES  JavaScript define TRES tipos de operadores: aritméticos. relacionales y lógicos  También hay definido un operador para realizar determinadas tareas como las (falta) OPERADORES-ASIGNACIÓN (=)  En JavaScript se puede utilizar el operador de asignación en cualquier expresión válida. var edad=19. correo electrónico) <html> <head> <title></title> <script language="JavaScript"> function hola() { alert("Bienbenidos a mi pagina Web"). correo electrónico) --> <input type="button" value="Datos de la Web" onClick=datos_web(). var fecha="10/04/2012". 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().</html> PRACTICA 2: haz una página que al abrirla de la bienvenida y tenga un botón que al pulsarlo muestre los datos de la página web (nombre de administrador. fecha.com". fecha. var email="patry_mr93@hotmail.página que al abrirla de la bienvenida y tenga un botón que al pulsarlo muestre los datos de la página web (nombre de administrador. .

variable o expresión). edad=20. alert("Cambios los valores anteriores").  Es posible realizar asignaciones múltiples. nombre="Patricia". mientras que en la parte derecha puede ser cualquier expresión válida (constante. EJEMPLO: MODIFICAR EL VALOR DE LAS VARIABLES NOMBRE Y EDAD (solo se pone var una vez para definir la misma variable. } </script> </head> <body> <form method="post" action="mailto:#"> <input type="button" value="Datos Personales" onClick=datos_personales(). alert("Nombre: \t"+nombre+"\nEdad: \t"+edad). EQUIVALE A … OPERADOR DESCRIPCIÓN = += -= *= /= %= Asignación 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. aunque uniéndolos se puede realizar cualquier tipo de operación: . variable=variable1.> </form> </body> </html> OPERADORES – ARITMÉTICOS Pueden aplicarse a todo tipo de expresiones Son utilizados para realizar operaciones matemáticas sencillas. alert("Nombre: \t"+nombre+"\nEdad: \t"+edad). igualar variables entre sí y a un valor. Las variables siempre al comienzo de la función) <html> <head> <title></title> <script language="JavaScript"> function datos_personales() { var nombre="Patricia Fernández Cardero". El operador destino (parte izquierda) debe ser siempre una variable. var edad=19. variable=variable1=variable2=variableN=valor.

cos(valor). …).pi Math.random()*interv.OPERADOR + * / % Nº e Nº π Raíz cuadrada DESCRIPCIÓN Resta Suma Multiplicación División Resto de una división. Tangente de un ángulo (radianes). Math.val3.e Math.sin(valor). Devuelve el mayor de los números en la lista.sqrt() Para realizar las demás raíces tenemos que considerarlas potencias y fracciones. Math. ⅟n) Logaritmo en base 2 Logaritmo en base 10 Logaritmo en base 2 de e Math. Devuelve el menor de los números en la lista.val2.tan(valor).ln2 Math. Por ejemplo entre 10 y 34 (x=10 e y=34). Math. -++ vari+=valor vari-=valor vari*=valor Math.exponte). Math.random(y-x) *Math.random()+x Math.val3. …).min(val1.pow(n1. Decremento en 1 Incremento en 1 Incrementa el valor de vari Decrementa el valor de vari Multiplica el valor de vari . Base exponente Número aleatorio entre 0 y el intervalo.ln10 Math. Math. Número aleatorio entre x e y. Coseno de un ángulo (radianes).abs(valor). Math.log2e Logaritmo en base 10 de e Math. Ejemplo: resto de 10 dividido entre 3: 10%2 Math.log(valor). Seno de un ángulo (radianes). Redondea un valor con decimales.max(val1.round(valor).log10e Valor absoluto.pow(base. Math. Math. Logaritmo decimal de valor. Math. Math.val2.

Si alguna o ambas son falsas el resultado es falso (false).OPERADORES – LÓGICOS Y RELACIONALES Los operadores relacionales hacen referencia a la relación entre unos valores y otros. Los lógicos se refieren a la forma en que esas relaciones pueden conectarse entre sí. Por ejemplo: (a<b) && (b<c) es verdadero (true). . si ambas son verdaderas. OPERADORES RELACIONALES OPERADOR < > <= >= == != DESCRIPCIÓN Menor que Mayor que Menor o igual que Mayor o igual que Igual distinto OPERADORES LÓGICOS OPERADOR && || ¡ DESCRIPCIÓN Y (AND) O (OR) NO (NOT) (el resultado es verdadero si ambas expresiones son verdaderas) (el resultado es verdadero si alguna expresión es verdadera) (el resultado invierte la condición de la expresión) El operador lógico OR x true true y true resultado true El operador lógico 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 lógico 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.

edad=edad+5. el resultado es falso. La introducción de datos se puede realizar por medio de la ventana prompt o utilizando controles como cajas de texto. y es verdadera si la comparación es falsa.La expresión " NO a es menor que b" !(a<b) Es falsa si (a<b) es verdadero. ."Nombre"). VENTANA PROMPT: variable=prompt(“texto de la ventana”.> </body> </html> CAJA DE TEXTO Otro mecanismo por el cual se pueden introducir datos. es mediante las cajas de texto. edad=prompt("Introduce tu Edad:". “valor inicial caja”). Por tanto. son los Estas variables no hay que declararlas. alert("Dentro de cinco años tu edad será: \t"+edad). nombre=prompt("Introduce tu Nombre:".  Si se pulsa el botón cancelar. Si ambas. var edad. 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. el contenido de la caja pasa a variable."Edad") alert("Hola \t"+nombre). la expresión: (a<b) ||(b<c) Es verdadera si una de las dos comparaciones lo es. a . de hecho cuando introducimos el cuadro de texto. el operador NOT actuando sobre (a<b) es equivalente a (a>=b) - La expresión "NO a es igual a b" !(a==b) Es verdadera si a es distinto de b.  Al pulsar el botón aceptar. son falsas. Esta expresión es equivalente a (a!=b) INTRODUCCIÓN DE DATOS JavaScript permite interactuar al usuario por medio de la introducción de datos.- En cambio. alert("Tu edad es: \t"+edad). y es falsa si a es igual a b. } </script> </head> <body onLoad=pregunta_nombre().

focus(). De texto a coma flotante (decimal) Var_numerica=parseFloat(var_texto).edad.> </body> </html> EJERCICIOS PDF 2º Ejercicio.la vez declaramos dichas variables.> <b>Edad:</b><input type="text" name="cajaNum" value="Escribe aquí tu edad" size="30"> <br> <input type="button" value="Procesar" onClick=datos_personales(). y el usuario introducirá la edad. <html> <head> <title></title> <script language="JavaScript"> function datos_personales() { var edad=parseInt(cajaNum. cajaNum. Debido a esto se hace necesario el uso de unas funciones predefinidas por JavaScript que facilitan la conversión.focus(). Ahora bien.focus(). <html> . DESCRIPCIÓN FUNCIÓN De texto a número entero Var_numerica=parseInt(var_texto).value="Escribe aquí tu Edad". Dentro de la caja debe aparecer la frase “Escribe aquí tu edad”. como muchos dígitos. por lo que solo van a recoger y recibir datos de este tipo. alert("Edad: \t"+edad). “Escribe aquí tu edad”. } </script> </head> <body onLoad=cajaNum. cajaNum. Cuando el usuario active el botón de procesado de datos el programa mostrará la ventana alert indicándole el año aproximado de su nacimiento (ya que esto depende de los meses).value). nunca enteros. Envía el cursor a la caja Nombre_caja. var año_nacimiento. cajaNum. alert("Naciste en el año: \t"+año_nacimiento). el cursor debe volver a la caja y en la misma debe aparecer la frase de antes. Escribe un programa similar al anterior en el que aparezca un cuadro de texto y un botón de procesamiento de datos. año_nacimiento= 2012 .select(). la forma de acceder el contenido Hay que destacar que estas variables son de tipo String (cadena). Una vez que se acepte la ventana. es decir por ejemplo la cadena “98” que es distinto del número 98.

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

BLOQUE II ESTRUCTURAS DE PROGRAMACIÓN. INICIO INSERTAR DATO CONDICIÓN SI NO CONDICIÓN SI NO FIN En este bloque se van a utilizar sobre todo los operadores lógicos y relacionales… .IMPORTANTE!! Declarar todas las variables. incluso las que hacen operaciones matemáticas. SENTENCIAS DE CONTROL.

} Sentencia de control FOR: para realizar bucles (repeticiones) de forma muy sencilla. switch (expresión) { case constante1: sentencia(s). Las llaves son obligatorias cuando hay más de una sentencia. case constanteN: sentencia(s). Pero para nosotros es obligatorio. }] Se pueden anidar varias estructuras IF. while (condición ó condiciones) { cuerpo. } . no siempre hay parte “else”.ELSE. se ejecutan las instrucciones y se vuelve a comprobar la condición.Es la manera que tiene JavaScript de provocar que el flujo de la ejecución avance y se ramifique en función de los cambios y estados de los datos y/o acciones del usuario. } [Else { Sentencia(s). Los corchetes significan que son opcionales..iteración) { sentencia(S). break. case constante3: sentencia(s). Sentencia de control SWITCH: para realizar comprobaciones múltiples tenido en cuenta el valor de una expresión. break. case constante2: sentencia(s). } Sentencia de control WHILE: permite crear bucles que se ejecutan una o más veces. for (inicialización. El flujo de ejecución será secuencial pero con elección a que ocurran unas opciones u otras. Mientras se cumpla la condición (o condiciones) dadas.condición_de_fin. SINTAXIS IF-ELSE: If (expresión-booleana) { Sentencia(s). habrá ciertos programas que no querremos hacer nada si no se cumple una condición. dependiendo de la condición indicada. [default:] sentencia(s). pero no se ponen. Siempre habrá algún bloque de sentencias que no se ejecute. break. break.

toUpperCase(). Transforma en mayúsculas el texto Los valores que retornan estos métodos (los matemáticos y los de cadena) Deben cargarse/asignarse a una variable del mismo tipo que el valor retornado. Posibilita el cambio de color.toLowerCase(). texto.charAt(indice). Reemplaza letr1 por letr2. Devuelve el índice de la letra buscada.letr2). MÉTODOS PARA CADENAS: Todos estos métodos son funciones que retornan una cadena de texto o un carácter (dependiendo de la función) excepto las funciones lenght e indexof que devuelve un número. setTimeout(“nombre_función()”. Devuelve la letra que este en la posición del índice. texto. Devuelve el texto comprendido entre los índices.toUpperCase(). texto.left:pos” style=”color:nombre_color” style=”visibility:hidden o visible” FUNCIÓN setTimeout. MÉTODO texto. } while(condición). Transforma en minúsculas el texto. Posibilita ocultar y mostrar.top:pos.replace(letr1. texto. ANIMACIONES. DESCRIPCIÓN Posibilita el cambio de posición. ESTILOS SINTAXIS style=”Position:absolute.intervalo_en_milisegundos). Esta instrucción transforma la cadena almacenada en texto a Mayúsculas y después lo almacena en la misma variable texto. APLICACIONES JAVASCRIPT. Do { cuerpo_del_bucle.subString(ind1. texto. Habrá veces que utilizaremos la misma variable que pasamos como parámetro para asignarla el valor devuelto por la función. texto.length. DESCRIPCIÓN Devuelve la longitud de la cadena. es decir: texto=texto.Sentencia de control DO-WHILE: similar al while. .indexof(letra).ind2). pero 1º ejecuta las sentencias del cuerpo y luego comprueba la condición.

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

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

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

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

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

<html> <head> <title></title> <script language="JavaScript"> /* escribe un programa que pida dos números al usuario y lance una ventana alert en la que aparezcan los dos número e indique cual es el mayor */ function maximo() { var n1. var n2. } else { [if (n1==n2){ alert("Los números son iguales").SOLO SERÍA PONER EL “ELSE” Y EL “ALERT” } } } </script> </head> <body> <center> <table border=2> <tr> <td><b>Introduce el primer número</b>: <td><b>Introduce el segundo número</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> . n1=parseFloat(cajan1. n2=parseFloat(cajan2. } else { if (n2>n1) { alert("El mayor de los números "+n1+" y "+n2+" es: "+n2). if (n1>n2){ alert("El mayor de los números "+n1+" y "+n2+" es: "+n1).value). PORQUE NO HAY MÁS POSIBILIDADES. HAY QUE OPTIMIZAR }] CÓDIGO. NO ES NECESARIO.value).

Sign up to vote on this title
UsefulNot useful