Universidad Central del Ecuador Carrera de Informáticadocument.write Sirve para mostrar un mensaje en la pantalla del documento html Ejemplo: <script> document.write("hola apoco no es interesante") </script> window.open Sirve para abrir una ventana pequeña o grande dentro de la página Ejemplo: <script> window.open("http://www.google.com","","width=550,height=420,menubar=no"/ http://www.google.com","","width=550,height=420,menubar=no") </script> Alert Crea una caja de diálogo con un icono de peligro amarillo, un botón 'Aceptar' y un texto definido por el parámetro enviado a la función. Ejemplo de alerta <script> alert("Ha ocurrido un error"); </script> Las alertas, nos serán útiles para transmitir información al usuario tal como errores ocurridos en la navegación, problemas en el rellenado de un formulario... Confirm Crea una caja de confirmación con un icono de interrogación, botones Aceptar y Cancelar y un texto definido por el parámetro enviado a la función. Devuelve 1 cuando el usuario abandona el diálogo pulsando Aceptar y 0 si lo hace pulsando Cancelar o el aspa de cerrar. Ejemplo de confirm 000 <script> 001 if(confirm('¿Seguro que ha leido las condiciones del contrato?'))this.form.submit(); 002 </script> Será útil para recibir información del usuario en tiempo de ejecución (al pulsar un botón, al pasar el mouse por un lugar...) GABRIEL GAIBOR La más importante es que tienen que comenzar por un carácter alfabético o el subrayado. Nombres admitidos para las variables podrían ser: Edad paisDeNacimiento _nombre También hay que evitar utilizar nombres reservados como variables. sumando1. un texto definido por el primer parámetro enviado a la función y un input de texto con valor predeterminado definido por el segundo parámetro. si nuestro programa realiza sumas. 002 </script> Prompt nos será útil sobre todo para recojer datos del usuario para utilizar en nuestro script en tiempo de ejecución. Vemos que su uso para nosotros es como si tuviésemos un apartado donde guardar un dato y que se pueden acceder a ellos con sólo poner su nombre. por ejemplo no podremos llamar a nuestra variable palabras como return o for. La función devuelve el valor insertado en el campo de formulario si el usuario pulsa en Aceptar o null si pulsa Cancelar o el aspa de cerrar. hay una serie de reglas adicionales para construir nombres para variables. El efecto sería algo parecido a esto. será muy normal que guardemos en variables los distintos sumandos que participan en la operación y el resultado de la suma. No podemos utilizar caracteres raros como el signo +. un espacio o un $. Los nombres de las variables han de construirse con caracteres alfanuméricos y el carácter subrayado (_). un espacio donde podemos guardar cualquier tipo de información que necesitemos para realizar las acciones de nuestros programas. Variables Javascript Una variable es un espacio en memoria donde se almacena un dato. Veamos ahora algunos nombres de variables que no está permitido utilizar: 12meses tu nombre return GABRIEL GAIBOR . sumando2 y suma. Por ejemplo.'[ nombre del usuario ]'). donde guardamos el resultado. sumando1 = 23 sumando2 = 33 suma = sumando1 + sumando2 En este ejemplo tenemos tres variables. que ya veremos que son utilizadas para estructuras del propio lenguaje. Aparte de esta.Universidad Central del Ecuador Carrera de Informática Prompt Muestra un diálogo de campo de formulario con botones Aceptar y Cancelar. Ejemplo de prompt 000 <script> 001 nombre = prompt('Introduce tu nombre'. Es una costumbre habitual en los lenguajes de programación el definir las variables que se van a usar en los programas y para ello. GABRIEL GAIBOR . se siguen unas reglas estrictas. Para declarar una variable global a la página simplemente lo haremos en un script. Cuando se declaren variables locales sólo podremos acceder a ellas dentro del lugar donde se ha declarado. al contrario de lo que pasa en la mayoría de los lenguajes de programación. se utiliza esa palabra para definir la variable antes de utilizarla. var operando1 var operando2 También se puede asignar un valor a la variable cuando se está declarando var operando1 = 23 var operando2 = 33 También se permite declarar varias variables en la misma línea. es decir. ya que no estamos obligados a hacerlo. Pero javascript se salta muchas reglas por ser un lenguaje un tanto libre a la hora de programar y uno de los casos en los que otorga un poco de libertad es a la hora de declarar las variables. es aconsejable declarar las variables. además de una buena costumbre y para ello Javascript cuenta con la palabra var. De todos modos. como el onclick. <SCRIPT> var variableGlobal </SCRIPT> Las variables globales son accesibles desde cualquier lugar de la página. si la habíamos declarado en una función solo podremos acceder a ella cuando estemos en esa función. las variables globales son las que están declaradas en el ámbito más amplio posible. desde el script donde se han declarado y todos los demás scripts de la página. es decir. que ya vimos que se podía incluir dentro de determinadas etiquetas HTML. var operando1. Variables locales También podremos declarar variables en lugares más acotados.Universidad Central del Ecuador Carrera de Informática pe%pe Declaración de variables Declarar variables consiste en definir y de paso informar al sistema de que vas a utilizar una variable. incluidos los manejadores de eventos. A estas variables les llamaremos locales. que en Javascript es una página web. como por ejemplo una función. con la palabra //var//. Como es lógico. siempre que se separen por comas.operando2 Variables globales Como hemos dicho. imprimir un mensaje en la pantalla o convertir variables de un tipo a otro. Cómo se escribe una función Una función se debe definir con una sintaxis especial que vamos a conocer a continuación. En los capítulos de funciones vamos primero a ver cómo realizar nuestras propias funciones y cómo llamarlas luego. Además. <SCRIPT> function miFuncion (){ var variableLocal } </SCRIPT> Qué es una función A la hora de hacer un programa ligeramente grande existen determinados procesos que se pueden concebir de forma independiente. Estos procesos se pueden agrupar en una función. pero también pueden ser locales a otros ámbitos. no sólo las que escribes tu. Así que podemos ver una función como una serie de instrucciones que englobamos dentro de un mismo proceso. en una página web puede haber una función para cambiar el color del fondo y desde cualquier punto de la página podríamos llamarla para que nos cambie el color cuando lo deseemos. y que son más sencillos de resolver que el problema entero.Universidad Central del Ecuador Carrera de Informática Las variables pueden ser locales a una función. A lo largo del libro veremos muchas de las funciones definidas en Javascript que debemos utilizar para realizar distintos tipos de acciones habituales. Por ejemplo. son ámbitos locales cualquier lugar acotado por llaves. Este proceso se podrá luego ejecutar desde cualquier otro sitio con solo llamarlo.. } GABRIEL GAIBOR . como por ejemplo un bucle. Ya hemos visto alguna función en nuestros sencillos ejemplos anteriores cuando hacíamos un document. Las funciones se utilizan constantemente. pues todos los lenguajes de programación tienen un montón de funciones para realizar procesos habituales como por ejemplo obtener la hora. definida para que no tengamos que repetir una y otra vez ese código en nuestros scripts. sino también las que ya están definidas en el sistema. sino que simplemente llamamos a la función y ella se encarga de hacer todo lo que debe. estos suelen ser realizados repetidas veces a lo largo de la ejecución del programa.write() en realidad estabamos llamando a la función write() asociada al documento de la página que escribe un texto en la página. function nombrefuncion (){ instrucciones de la función . En general.. con eso conseguiremos que se ejecuten todas las instrucciones que tiene la función entre las dos llaves. la función suma definida como: function Suma(x){ GABRIEL GAIBOR . esta propiedad devolverá una cadena de caracteres. Cómo llamar a una función Cuando se llaman a las funciones Para ejecutar una función la tenemos que llamar en cualquier parte de la página. se muestra una función que devuelve el área de un cuadrado de lado l. sino que son interpretadas como el significado de la misma. por lo tanto. que como los nombres de variables puede tener números. Seguidamente se escribe el nombre de la función. Es un array que contiene los parámetros que le son pasados a la función. reservada para este uso. function Area(lado){ return lado*lado. Para ejecutar la función utilizamos su nombre seguido de los paréntesis. pero ya veremos otras más complejas. La propiedad caller. Muestra el nombre de la función que llama. La sentencia return es la que permite devolver el resultado de una función. al poner etiquetas HTML se interpretan como lo que son. Las etiquetas H1 no se escriben en la página. } Propiedades de las funciones. A continuación se colocan entre llaves las distintas instrucciones de la función.write("<H1>Hola a todos</H1>") } Simplemente escribe en la página un texto. es una función tan sencilla que el ejemplo no expresa suficientemente el concepto de función. Las llaves en el caso de las funciones no son opcionales. JavaScript asocia a cada función dos propiedades: arguments y caller. En el ejemplo que se verá a continuación. function escribirBienvenida(){ document. Veamos un ejemplo de función para escribir en la página un mensaje de bienvenida dentro de etiquetas <H1> para que quede más resaltado. La propiedad arguments. NombreDeLaFuncion() La sentencia return. para que se vea fácilmente la estructura de instrucciones que engloba la función.Universidad Central del Ecuador Carrera de Informática Primero se escribe la palabra function. Estas propiedades permiten respectivamente la gestión de los parámetros opcionales y la identificacíón de la función que llama. en este caso que escribimos un encabezado de nivel 1. Por ejemplo. letras y algún carácter adicional como en guión bajo. Como estamos escribiendo en una página web. además es útil colocarlas siempre como se ve en el ejemplo. Suma(4. Ejemplo: escape("#"). <SCRIPT> function calcula(obj){ obj. La función eval. Estas dos funciones permiten codificar cadenas de caracteres en formato URL.length. 5.arguments. La función eval tiene como argumento una expresión y devuelve el valor de la misma. return resultado.value = eval(obj. El código siguiente ilustra este ejemplo permitiendo al usuario introducir una expreción numérica y visualiza a continuación el valor de la expresión. Esta codificación es necesaria en la creación automática de enlaces de hipertexto o en la definición de propiedades persistentes como los Cookies.value) } </SCRIPT> <FORM NAME="evalua"> Introducir expresión: <INPUT TYPE="text" NAME="expr" SIZE=20> <br> Resultado: <INPUT TYPE="text" NAME="result" SIZE=20> <br> <INPUT TYPE="button" VALUE="evalua" onClick="calcula(this. Esta función resulta útil para evaluar una cadena de caracteres que representa una expresión numérica. var resultado = 0.Universidad Central del Ecuador Carrera de Informática var sumandos = suma. var num_op = suma. for (var i=0. // devuelve %23 unescape("%23").expr.5. Las funciones predefinidas por el lenguaje. } Vemos como esta función permite calcular la suma de los números pasados como argumentos.1.7) devuelve 16 y Suma(56) devuelve 56. i++) resultado += sumandos[i].arguments. i<num_op.result. Así. La edición efectuada mediante un campo de formulario es una cadena de caracteres que a veces es necesario convertir en valor numérico.form)"> </FORM> Introducir expresión: Resultado: Las funciones escape y unescape. // devuelve # Ejemplo GABRIEL GAIBOR .5. value)"> formato estándar a URL<br> <INPUT type="radio" name="codificacion" value="URL" onClick="this.form. alert("Es numérico").form. <form> Introducir un valor numérico: <input type="text" name="valor"> <br> <input type="button" value=" Comprobar " onClick="Comprueba(this.value = number.char. evalúa un argumento para ver si es NaN: Not Number.char.Universidad Central del Ecuador Carrera de Informática <form> Introducir carácter en formato URL o normal: <input type="text" name="char" size=5> <br> <INPUT type="radio" name="codificacion" value="normal" onClick="this.. Es decir. if (isNaN(number)==true) alert("No es numérico").value=escape(this.char..value=unescape(this. } </SCRIPT> .value).form)"> </form> Introducir un valor numérico: GABRIEL GAIBOR . else form.form. isNaN(valor de entrada) Ejemplo <SCRIPT> function Comprueba(form){ var number = parseFloat(form. Función que comprueba si el valor pasado por parámetros es númerico o no.value)"> formato URL a estándar<br> </form> Introducir carácter en formato URL o normal: formato estándar a URL formato URL a estándar La función isNaN. El resultado de esta función es un booleano.valor.char.form.valor. //base es opcional.form.int. parseFloat(cadena de caracteres) Ejemplo <form> Convierte a real: <input type="text" name="float"><br> <input type="button" value=" Convierte " onClick="this.value=parseInt(this. el '-' o un exponente. el '-' o un exponente.value=parseInt(this. el signo '+'. devuelve el valor encontrado hasta ese punto. 8)"> Expresar entero en octal<br> </form> Introducir entero: Expresar entero en decimal Expresar entero en hexadecimal Expresar entero en octal GABRIEL GAIBOR .value. 10 ó 16.form. La base puede ser 8.int. Convierte una cadena de caracteres de entrada a un número entero con una base especificada. Convierte una string a un número en punto flotante. Del mismo modo.value)"> </form> Convierte a real: La función parseInt. Si se encuentra otros caracteres que no sean números.value. si el primer caracter no se puede convertir a número devolverá cero.form.form. el signo '+'.int. Si se encuentra otros caracteres que no sean números.value.base) Ejemplo Introducir entero: <input type="text" name="int"> <br> <INPUT type="radio" name="conversion" value="decimal" onClick="this.float.form. 10)"> Expresar entero en decimal<br> <INPUT type="radio" name="conversion" value="hexadecimal" onClick="this.form.float.form.value=parseInt(this. si el primer caracter no se puede convertir a número devolverá cero. parseInt(ristra. devuelve el valor encontrado hasta ese punto.int.int. Del mismo modo.Universidad Central del Ecuador Carrera de Informática La función parseFloat.int. 16)"> Expresar entero en hexadecimal<br> <INPUT type="radio" name="conversion" value="octal" onClick="this.value=parseFloat(this.form. Universidad Central del Ecuador Carrera de Informática Expresar entero en hexadecimal Expresar entero en octalFinal del formulario GABRIEL GAIBOR .