comparte el articulo 

Manual JavaScript. Funciones

Actualizado el 02/12/2008 < > 0 Comentarios

Resumen: JavaScript contiene sus propias funciones que podemos utilizar en nuestros programas.

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>

  <script type="text/javascript">

  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>

  <script type="text/javascript">

  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>

  <script type="text/javascript">

  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>

  <script type="text/javascript">

  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>

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

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

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

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

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

  </body>

  </html>

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

 <html>

  <head>

  <script language="javascript">

  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>

  <script type="text/javascript">

  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.

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

Autor: Marcos Legido Hernández

URL: Licencia GNU

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras