Programación en JavaScript/FuncionesJS

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. El objeto window representa a la ventana del navegador y 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.

Otro objeto dependiente de window es document que contiene, entre otras cosas, funciones como write que nos permite escribir texto en 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.

Mostrar 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 ventana confirmación">
</form>
</body>
</html>

Abrir una ventana nueva

<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.

Cambiar la URL actual

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>

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>

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="Redimensionar ventana">
</form>
</body>
</html>

Si se usan frames, debe utilizarse el elemento top en vez del elemento window, para representar el frame superior.

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 SCROLL SCROLL SCROLL SCROLL</p>
<br><br><br><br><br><br><br><br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br><br><br><br><br><br><br><br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br><br><br><br><br><br><br><br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br><br><br><br><br><br><br><br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br><br><br><br><br><br><br><br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br><br><br><br><br><br><br><br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br><br><br><br><br><br><br><br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br><br><br><br><br><br><br><br>
</body>
</html>

Retrasar la ejecución del programa durante un tiempo determinado

<html>
<head>
<script language="javascript">
   function timeout()
   {
      setTimeout("alert('Esta ventana aparece un segundo 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: una cadena de texto que representa un código JavaScript a ejecutar cuando hayan pasado el número de milisegundos del segundo parámetro.

Cambiar una imagen por otra

<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>

Como podemos apreciar, lo primero que hacemos es recoger todas las imagenes de la página en una matriz mediante el objeto document.images 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 cómo crear nuestros propios objetos y aplicarlos en nuestros programas.

← Funciones

Funciones en JavaScript

OOP →