funciones en javascript

Los eventos onLoad y onUnLoad

El evento onLoad es aquel que se produce cuando un navegador carga un documento HTML o una imagen. Este evento se utiliza dentro de la etiqueta <BODY> del documento HTML o de la etiqueta <FRAMESET> si se está trabajando con marcos (frames). La sintaxis es:

<body onLoad="script a ejecutar"><frameset onLoad="script a ejecutar">

El evento onUnLoad tiene como misión ejecutar un script cuando la página web actual se descarga, ya sea porque se accede a otra página o porque se pulsan los botones de retroceder y avanzar. La sintaxis es la misma que la del evento anterior cambiando onLoad por onUnLoad.

En el siguiente ejemplo, se tiene un documento HTML con tres formularios y se implementa un programa JavaScript que utilizando el array forms del objeto document, muestra el nombre (name) de cada uno de ellos.

<html><head><title> Ejemplo del evento onLoad</title><script language=JavaScript>function window_onload() { var numberForms = document.forms.length; var formIndex; for (formIndex = 0; formIndex < numberForms; formIndex++) { alert(document.forms[formIndex].name); }}</script></head><body language=JavaScript onLoad="window_onload()">

<FORM NAME="form1"><P>Dentro del Primer formulario</P></FORM>

<FORM NAME="form2"><P>Dentro del Segundo formulario</P></FORM>

<FORM NAME="form3"><P>Dentro del Tercer formulario</P></FORM>

</body></html>

Los eventos onClick y onDblClick

El evento onClick se lanza cuando el usuario hace un click con el ratón, y el onDblClick cuando efectúa un doble click sobre algún elemento de un documento HTML .

El siguiente ejemplo cuenta el número de veces que se pulsa sobre un botón.

<html><head><title> Ejemplo del evento onClick</title><script language=JavaScript>var numberOfClicks = 0;

function myButton_onclick() { numberOfClicks++; window.document.form1.myButton.value = 'Botón pulsado ' + numberOfClicks + ' veces';}</script></head><body>

<FORM NAME=form1> <INPUT TYPE='button' NAME='myButton' VALUE='Botón pulsado 0 veces' onclick="myButton_onclick()"></FORM>

</body></html>

Funciones en JavaScript

JavaScript contiene sus propias funciones que podemos utilizar en nuestros programas. Aunque algunas de estas funciones podemos usarlas independientemente de sus correspondientes objetos, lo cierto es que todas las funciones provienen de algún objeto específico. Concretamente, el objeto window, que representa a la ventana del navegador, es

el objeto por defecto. Esto quiere decir que podemos usar sus elementos (funciones, propiedades, objetos, etc…) sin necesidad de llamar explícitamente al objeto window.

Ya conocemos alguna que otra función como length (de los objetos de matriz) o alert, que proviene del objeto window y que muestra un mensaje en una ventana. document es un objeto dependiente de window que contiene, entre otras cosas, funciones como write, que nos permite volcar texto sobre la página web. A continuación vamos a estudiar algunas posibilidades que nos aportan las funciones en JavaScript, ya que hay una gran cantidad de ellas. Sin embargo, vamos a repasar las más usadas para el desarrollo web en general.

En este ejemplo veremos como llamar a una ventana de confirmación (aceptar o cancelar):

<html>

<head>

<script type="text/javascript">

function ver_confirm()

{

var name=confirm("Pulsa un botón")

if (name==true)

{

document.write("Has pulsado el botón Aceptar");

}

else

{

document.write("Has pulsado el botón Cancelar");

}

}

</script>

</head>

<body>

<form>

<input type="button" onclick="ver_confirm()"

value="Mostrar una ventana de confirmación">

</form>

</body>

</html>

En este ejemplo abriremos una ventana permitiendo controlar su aspecto:

<html>

<head>

<script language="javascript">

function open_win()

{

window.open("http://www.google.es","nueva","toolbar=yes, location=yes,

directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no,

copyhistory=yes, width=400, height=400");

}

</script>

</head>

<body>

<form>

<input type="button" value="Abrir ventana" onclick="open_win()">

</form>

</body>

</html>

El primer parámetro de open es la dirección que queremos mostrar en la ventana. El segundo es el nombre que queremos darle a la ventana (y que podemos usar, por ejemplo, en el atributo target de los enlaces). El tercer y último parámetro nos permite definir el aspecto de la ventana según los datos que le indicamos.

El siguiente ejemplo nos muestra el uso de location para conseguir la dirección de la página actual en la que nos encontramos o bien ir a una página diferente:

<html>

<head>


function actual_location()

{

alert(location);

}

function cambiar_location()

{

window.location="http://www.google.es/";

}

</script>

</head>

<body>

<form>

<input type="button" onclick="actual_location()" value="Mostrar la URL actual">

<input type="button" onclick="cambiar_location()" value="Cambiar URL">

</form>

</body>

</html>

Con este código podemos imprimir una página:

<html>

<head>


function printpage()

{

window.print();

}

</script>

</head>

<body>

<form>

<input type="button" value="Imprime esta página" onclick="printpage()">

</form>

</body>

</html>

A continuación vamos a ver como cambiar el tamaño de la ventana actual:

<html>

<head>


function resizeWindow()

{

window.resizeBy(-100,-100)

}

</script>

</head>

<body>

<form>

<input type="button" onclick="resizeWindow()" value="Retallar ventana">

</form>

</body>

</html>

Nota: Si se usan frames, debe utilizarse el elemento top en vez del elemento window, para representar el frame superior. En el siguiente ejemplo vemos como avanzar a una posición específica de la ventana:

<html>

<head>


function scrollWindow()

{

window.scrollTo(100,500)

}

</script>

</head>

<body>

<form>

<input type="button" onclick="scrollWindow()" value="Scroll">

</form>

<p>SCROLL SCROLL SCROLL SCROLL</p>

<br><br><br><br><br><br><br><br>

<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>




<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLLSCROLL</p>


</body>

</html>

En el siguiente ejemplo, vemos como retrasar la ejecución del programa durante un tiempo determinado:

<html>

<head>


function timeout()

{

setTimeout("alert('Esta ventana aparece un seg. después _

de que hayas pulsado el botón')", 1000)

}

</script>

</head>

<body>

<form>

<input type="button" onclick="timeout()" value="Cuenta atrás">

</form>

</body>

</html>

Un par de detalles sobre este último ejemplo: La función setTimeout tiene dos parámetros como puede verse, una cadena de texto que representa un código JavaScript a ejecutar cuando hayan pasado el número de milisegundos del segundo parámetro.

Para terminar esta galería de ejemplos, veamos como cambiar una imagen por otra en la página:

<html>

<head>


function setSrc()

{

var x=document.images

x[0].src="foto1.gif"

}

</script>

</head>

<body>

<img src="foto2.gif" width="107" height="98">

<form>

<input type="button" onclick="setSrc()" value="Cambiar imagen">

</form>

</body>

</html>

Naturalmente, debemos substituir las imágenes por otras con las que contemos realmente para ver el ejemplo. Como podemos apreciar, lo primero que hacemos es recoger todas las imagenes de la página en una matriz y después acceder a la imagen específica como se muestra en la funcion setSrc(). Para hacer el cambio usamos la propiedad src que tienen todos los objetos de imagen.

A medida que vayamos pasando por los capítulos de este curso, iremos viendo nuevos ejemplos con nuevas posibilidades de manejo de las funciones y sus respectivos objetos. En el siguiente capítulo veremos como crear nuestros propios objetos y aplicarlos en nuestros programas.

Seguir el manual

« Anterior: Manual JavaScript. Clases y objetos Siguiente: Manual JavaScript. Funciones recursivas »

Publicado el 02/12/2008, última actualización 02/12/2008.

Funciones miembro en JavaScript

Hasta ahora hemos visto como crear propiedades de las clases, pero necesitamos crear código en ese objeto que utilice las propiedades que hemos creado en el constructor. Para crear una función miembro, debemos indicarlo en la propia función de construccion:

function Persona(nombre) {

this.nombre = nombre;

this.color_pelo = 'negro';

this.peso = 75;

this.altura = 165;

this.sexo = 'varón';

this.dormir = dormir; // Nueva función miembro

}

Y ahora definimos la función dormir:

function dormir() {

alert(this.nombre + ' está durmiendo');

}

Fijémonos en la función. Tiene una forma bastante normal. Lo único especial que hemos hecho es añadir la linea

this.dormir = dormir;

al constructor, con lo que hemos asignado la función dormir como si fuera una propiedad. Recordemos que TODO es un objeto en JavaScript, y esto incluye a las funciones. Ahora, para ejecutar este código, utilizamos el objeto anteriormente creado para ponerlo en marcha:

hombre.dormir();

Veamos en un ejemplo todo el código que hemos generado hasta ahora:

<html>

<head>


function Persona(nombre) {

this.nombre = nombre;

this.color_pelo = 'negro';

this.peso = 75;

this.altura = 165;

this.sexo = 'varón';

this.dormir = dormir;

}

function dormir() {

alert(this.nombre + ' está durmiendo');

}

</script>

</head>

<body>

<form>

</form>

<script>

var hombre = new Persona('Pepe');

hombre.dormir();

</script>

</body>

</html>

Como resultado, nos mostrará el mensaje “Pepe está durmiendo”. Como vemos, podemos usar las propiedades de los objetos dentro de las funciones miembro, aunque también podríamos construir la misma funcion de otra manera:

function dormir() {

with (this)

alert(nombre + ' está durmiendo');

}

with es una palabra reservada de JavaScript que permite coger una variable de objeto como this y permite utilizar sus miembros como si fueran variables independientes. Pero tiene sus restricciones: estos nombres abreviados sólo se pueden utilizar dentro del ambito de with (que si tiene varias lineas, estas deben estar contenidas entre llaves, como for, if, etc…), y además, se pueden confundir facilmente con variables locales a la función o globales del programa, con lo cual particularmente no recomendamos el uso de with, ya que puede dar lugar a fallos de ejecución dificiles de tratar si no se tienen en cuenta estas restricciones. Se aconseja usar la forma this.nombre. También se recomienda crear cada clase en un archivo

diferente para que no haya confusiones de nombres, sobre todo de funciones miembro. Objetos de JavaScript

Funciones en JavaScript

JavaScript contiene sus propias funciones que podemos utilizar en nuestros programas. Aunque algunas de estas funciones podemos usarlas independientemente de sus correspondientes objetos, lo cierto es que todas las funciones provienen de algún objeto específico. Concretamente, el objeto window, que representa a la ventana del navegador, es

el objeto por defecto. Esto quiere decir que podemos usar sus elementos (funciones, propiedades, objetos, etc…) sin necesidad de llamar explícitamente al objeto window.

Ya conocemos alguna que otra función como length (de los objetos de matriz) o alert, que proviene del objeto window y que muestra un mensaje en una ventana. document es un objeto dependiente de window que contiene, entre otras cosas, funciones como write, que nos permite volcar texto sobre la página web. A continuación vamos a estudiar algunas posibilidades que nos aportan las funciones en JavaScript, ya que hay una gran cantidad de ellas. Sin embargo, vamos a repasar las más usadas para el desarrollo web en general.

En este ejemplo veremos como llamar a una ventana de confirmación (aceptar o cancelar):

<html>

<head>


function ver_confirm()

{

var name=confirm("Pulsa un botón")

if (name==true)

{

document.write("Has pulsado el botón Aceptar");

}

else

{

document.write("Has pulsado el botón Cancelar");

}

}

</script>

</head>

<body>

<form>

<input type="button" onclick="ver_confirm()"

value="Mostrar una ventana de confirmación">

</form>

</body>

</html>

En este ejemplo abriremos una ventana permitiendo controlar su aspecto:

<html>

<head>


function open_win()

{

window.open("http://www.google.es","nueva","toolbar=yes, location=yes,

directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no,

copyhistory=yes, width=400, height=400");

}

</script>

</head>

<body>

<form>

<input type="button" value="Abrir ventana" onclick="open_win()">

</form>

</body>

</html>

El primer parámetro de open es la dirección que queremos mostrar en la ventana. El segundo es el nombre que queremos darle a la ventana (y que podemos usar, por ejemplo, en el atributo target de los enlaces). El tercer y último parámetro nos permite definir el aspecto de la ventana según los datos que le indicamos.

El siguiente ejemplo nos muestra el uso de location para conseguir la dirección de la página actual en la que nos encontramos o bien ir a una página diferente:

<html>

<head>


function actual_location()

{

alert(location);

}

function cambiar_location()

{

window.location="http://www.google.es/";

}

</script>

</head>

<body>

<form>

<input type="button" onclick="actual_location()" value="Mostrar la URL actual">

<input type="button" onclick="cambiar_location()" value="Cambiar URL">

</form>

</body>

</html>

Con este código podemos imprimir una página:

<html>

<head>


function printpage()

{

window.print();

}

</script>

</head>

<body>

<form>

<input type="button" value="Imprime esta página" onclick="printpage()">

</form>

</body>

</html>

A continuación vamos a ver como cambiar el tamaño de la ventana actual:

<html>

<head>


function resizeWindow()

{

window.resizeBy(-100,-100)

}

</script>

</head>

<body>

<form>

<input type="button" onclick="resizeWindow()" value="Retallar ventana">

</form>

</body>

</html>

Nota: Si se usan frames, debe utilizarse el elemento top en vez del elemento window, para representar el frame superior. En el siguiente ejemplo vemos como avanzar a una posición específica de la ventana:

<html>

<head>


function scrollWindow()

{

window.scrollTo(100,500)

}

</script>

</head>

<body>

<form>

<input type="button" onclick="scrollWindow()" value="Scroll">

</form>

<p>SCROLL SCROLL SCROLL SCROLL</p>






<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLLSCROLL</p>


</body>

</html>

En el siguiente ejemplo, vemos como retrasar la ejecución del programa durante un tiempo determinado:

<html>

<head>


function timeout()

{

setTimeout("alert('Esta ventana aparece un seg. después _

de que hayas pulsado el botón')", 1000)

}

</script>

</head>

<body>

<form>

<input type="button" onclick="timeout()" value="Cuenta atrás">

</form>

</body>

</html>

Un par de detalles sobre este último ejemplo: La función setTimeout tiene dos parámetros como puede verse, una cadena de texto que representa un código JavaScript a ejecutar cuando hayan pasado el número de milisegundos del segundo parámetro.

Para terminar esta galería de ejemplos, veamos como cambiar una imagen por otra en la página:

<html>

<head>


function setSrc()

{

var x=document.images

x[0].src="foto1.gif"

}

</script>

</head>

<body>

<img src="foto2.gif" width="107" height="98">

<form>

<input type="button" onclick="setSrc()" value="Cambiar imagen">

</form>

</body>

</html>

Naturalmente, debemos substituir las imágenes por otras con las que contemos realmente para ver el ejemplo. Como podemos apreciar, lo primero que hacemos es recoger todas las imagenes de la página en una matriz y después acceder a la imagen específica como se muestra en la funcion setSrc(). Para hacer el cambio usamos la propiedad src que tienen todos los objetos de imagen.

A medida que vayamos pasando por los capítulos de este curso, iremos viendo nuevos ejemplos con nuevas posibilidades de manejo de las funciones y sus respectivos objetos. En el siguiente capítulo veremos como crear nuestros propios objetos y aplicarlos en nuestros programas.

Seguir el manual

« Anterior: Manual JavaScript. Clases y objetos Siguiente: Manual JavaScript. Funciones recursivas »

Publicado el 02/12/2008, última actualización 02/12/2008.

funciones en javascript

Documents