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 misin ejecutar un script cuando la pgina web actual se
descarga, ya sea porque se accede a otra pgina 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 ratn, y el onDblClick
cuando efecta un doble click sobre algn elemento de un documento HTML .
El siguiente ejemplo cuenta el nmero de veces que se pulsa sobre un botn.

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

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

<FORM NAME=form1>
<INPUT TYPE='button' NAME='myButton' VALUE='Botn 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 algn objeto
especfico. 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 explcitamente al objeto window.
Ya conocemos alguna que otra funcin 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 pgina web. A continuacin 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 ms usadas para el desarrollo web en general.
En este ejemplo veremos como llamar a una ventana de confirmacin (aceptar o cancelar):
<html>

<head>

<script type="text/javascript">

function ver_confirm()

{

var name=confirm("Pulsa un botn")

if (name==true)

{

document.write("Has pulsado el botn Aceptar");

}

else

{

document.write("Has pulsado el botn Cancelar");

}

}

</script>

</head>

<body>

<form>

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

value="Mostrar una ventana de confirmacin">

</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 parmetro de open es la direccin 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 parmetro nos permite definir el
aspecto de la ventana segn los datos que le indicamos.
El siguiente ejemplo nos muestra el uso de location para conseguir la direccin de la pgina
actual en la que nos encontramos o bien ir a una pgina 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 cdigo podemos imprimir una pgina:
<html>

<head>


function printpage()

{

window.print();

}

</script>

</head>

<body>

<form>

<input type="button" value="Imprime esta pgina"
onclick="printpage()">

</form>

</body>

</html>
A continuacin vamos a ver como cambiar el tamao 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 posicin
especfica 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 ejecucin del programa durante un tiempo
determinado:
<html>

<head>


function timeout()

{

setTimeout("alert('Esta ventana aparece un seg. despus _

de que hayas pulsado el botn')", 1000)

}

</script>

</head>

<body>

<form>

<input type="button" onclick="timeout()"
value="Cuenta atrs">

</form>

</body>

</html>
Un par de detalles sobre este ltimo ejemplo: La funcin setTimeout tiene dos parmetros
como puede verse, una cadena de texto que representa un cdigo JavaScript a ejecutar
cuando hayan pasado el nmero de milisegundos del segundo parmetro.
Para terminar esta galera de ejemplos, veamos como cambiar una imagen por otra en la
pgina:
<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 imgenes 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 pgina en una matriz y despus acceder a la imagen especfica 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 captulos de este curso, iremos viendo nuevos
ejemplos con nuevas posibilidades de manejo de las funciones y sus respectivos objetos. En
el siguiente captulo 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 actualizacin 02/12/2008.

Funciones miembro en JavaScript
Hasta ahora hemos visto como crear propiedades de las clases, pero necesitamos crear
cdigo en ese objeto que utilice las propiedades que hemos creado en el constructor. Para
crear una funcin miembro, debemos indicarlo en la propia funcin de construccion:
function Persona(nombre) {

this.nombre = nombre;

this.color_pelo = 'negro';

this.peso = 75;

this.altura = 165;

this.sexo = 'varn';

this.dormir = dormir; // Nueva funcin miembro

}
Y ahora definimos la funcin dormir:
function dormir() {

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

}
Fijmonos en la funcin. Tiene una forma bastante normal. Lo nico especial que hemos
hecho es aadir la linea
this.dormir = dormir;
al constructor, con lo que hemos asignado la funcin dormir como si fuera una propiedad.
Recordemos que TODO es un objeto en JavaScript, y esto incluye a las funciones. Ahora,
para ejecutar este cdigo, utilizamos el objeto anteriormente creado para ponerlo en
marcha:
hombre.dormir();
Veamos en un ejemplo todo el cdigo 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 = 'varn';

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 tambin
podramos 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 slo se pueden utilizar dentro del ambito de with
(que si tiene varias lineas, estas deben estar contenidas entre llaves, como for, if, etc), y
adems, se pueden confundir facilmente con variables locales a la funcin o globales del
programa, con lo cual particularmente no recomendamos el uso de with, ya que puede dar
lugar a fallos de ejecucin dificiles de tratar si no se tienen en cuenta estas restricciones. Se
aconseja usar la forma this.nombre. Tambin 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 algn objeto
especfico. 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 explcitamente al objeto window.
Ya conocemos alguna que otra funcin 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 pgina web. A continuacin 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 ms usadas para el desarrollo web en general.
En este ejemplo veremos como llamar a una ventana de confirmacin (aceptar o cancelar):
<html>

<head>


function ver_confirm()

{

var name=confirm("Pulsa un botn")

if (name==true)

{

document.write("Has pulsado el botn Aceptar");

}

else

{

document.write("Has pulsado el botn Cancelar");

}

}

</script>

</head>

<body>

<form>

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

value="Mostrar una ventana de confirmacin">

</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 parmetro de open es la direccin 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 parmetro nos permite definir el
aspecto de la ventana segn los datos que le indicamos.
El siguiente ejemplo nos muestra el uso de location para conseguir la direccin de la pgina
actual en la que nos encontramos o bien ir a una pgina 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 cdigo podemos imprimir una pgina:
<html>

<head>


function printpage()

{

window.print();

}

</script>

</head>

<body>

<form>

<input type="button" value="Imprime esta pgina"
onclick="printpage()">

</form>

</body>

</html>
A continuacin vamos a ver como cambiar el tamao 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 posicin
especfica 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 ejecucin del programa durante un tiempo
determinado:
<html>

<head>


function timeout()

{

setTimeout("alert('Esta ventana aparece un seg. despus _

de que hayas pulsado el botn')", 1000)

}

</script>

</head>

<body>

<form>

<input type="button" onclick="timeout()"
value="Cuenta atrs">

</form>

</body>

</html>
Un par de detalles sobre este ltimo ejemplo: La funcin setTimeout tiene dos parmetros
como puede verse, una cadena de texto que representa un cdigo JavaScript a ejecutar
cuando hayan pasado el nmero de milisegundos del segundo parmetro.
Para terminar esta galera de ejemplos, veamos como cambiar una imagen por otra en la
pgina:
<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 imgenes 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 pgina en una matriz y despus acceder a la imagen especfica 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 captulos de este curso, iremos viendo nuevos
ejemplos con nuevas posibilidades de manejo de las funciones y sus respectivos objetos. En
el siguiente captulo 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 actualizacin 02/12/2008.

Funciones en JavaScript

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Funciones en JavaScript

Uploaded by

Copyright:

Available Formats

Los eventos onLoad y onUnLoad

El evento onLoad es aquel que se produce cuando un navegador carga un documento

You might also like