CONALEP 1

Diseo de pginas web Rubrica #3

Yolanda Mireles Bentez 602 Mat: 090260886-8

P.S, P juan Gabriel Ramrez vela

25-mayo-2012

Comenzamos con las funciones en Javascript. Definimos el concepto de funcin y aprendemos a crearlas y a llamarlas.

Seguimos trabajando y ampliando nuestros conocimientos sobre Javascript. Con lo visto hasta ahora en el Manual de Javascript ya tenemos una cierta soltura para trabajar en este interesante lenguaje de programacin. Pero todava nos queda mucho por delante. Ahora vamos a ver un tema muy importante, sobretodo para los que no han programado nunca y con Javascript estn dando sus primeros pasos en el mundo de la programacin ya que veremos un concepto nuevo, el de funcin, y los usos que tiene. Para los que ya conozcan el concepto de funcin tambin ser un captulo til, pues tambin veremos la sintaxis y funcionamiento de las funciones en Javascript.

Qu es una funcin
A la hora de hacer un programa ligeramente grande existen determinados procesos que se pueden concebir de forma independiente, y que son ms sencillos de resolver que el problema entero. Adems, estos suelen ser realizados repetidas veces a lo largo de la ejecucin del programa. Estos procesos se pueden agrupar en una funcin, definida para que no tengamos que repetir una y otra vez ese cdigo en nuestros scripts, sino que simplemente llamamos a la funcin y ella se encarga de hacer todo lo que debe.

As que podemos ver una funcin como una serie de instrucciones que englobamos dentro de un mismo proceso. Este proceso se podr luego ejecutar desde cualquier otro sitio con solo llamarlo. Por ejemplo, en una pgina web puede haber una funcin para cambiar el color del fondo y desde cualquier punto de la pgina podramos llamarla para que nos cambie el color cuando lo deseemos. Nota: Si queremos, podemos ampliar esta descripcin de las funciones en el artculo Concepto de funcin.

Las funciones se utilizan constantemente, no slo las que escribes t, sino tambin las que ya estn definidas en el sistema, pues todos los lenguajes de programacin suelen tener un montn de funciones para realizar procesos habituales, como por ejemplo obtener la hora, imprimir un mensaje en la pantalla o convertir variables de un tipo a otro. Ya hemos visto alguna funcin en nuestros sencillos ejemplos anteriores. Por ejemplo, cuando hacamos un document.write() en realidad estbamos llamando a la funcin write() asociada al documento de la pgina, que escribe un texto en la pgina. En los captulos de funciones vamos primero a ver cmo realizar nuestras propias funciones y cmo llamarlas luego. A lo largo del manual veremos muchas de las funciones definidas en Javascript que debemos utilizar para realizar distintos tipos de acciones habituales.

Cmo se escribe una funcin

Una funcin se debe definir con una sintaxis especial que vamos a conocer a continuacin.

function nombrefuncion (){ instrucciones de la funcin ... }

Primero se escribe la palabra function, reservada para este uso. Seguidamente se escribe el nombre de la funcin, que como los nombres de variables puede tener nmeros, letras y algn carcter adicional como en guin bajo. A continuacin se colocan entre llaves las distintas instrucciones de la funcin. Las llaves en el caso de las funciones no son opcionales, adems es til colocarlas siempre como se ve en el ejemplo, para que se reconozca fcilmente la estructura de instrucciones que engloba la funcin.

Veamos un ejemplo de funcin para escribir en la pgina un mensaje de bienvenida dentro de etiquetas <H1> para que quede ms resaltado.

function escribirBienvenida(){ document.write("<H1>Hola a todos</H1>") } Simplemente escribe en la pgina un texto. Admitimos que es una funcin tan sencilla, que el ejemplo no expresa suficientemente el concepto de funcin, pero ya veremos otras ms complejas. Las etiquetas H1 no se muestran en la pgina, sino que son interpretadas como el significado de la misma, en este caso que escribimos un encabezado de nivel 1. Como estamos escribiendo en una pgina web, al poner etiquetas HTML se interpretan como lo que son.

Cmo llamar a una funcin

Para ejecutar una funcin la tenemos que invocar en cualquier parte de la pgina. Con eso conseguiremos que se ejecuten todas las instrucciones que tiene la funcin entre las dos llaves. Para ejecutar la funcin utilizamos su nombre seguido de los parntesis. Por ejemplo, as llamaramos a la funcin escribirBienvenida() que acabamos de crear. escribirBienvenida() Luego veremos que existen muchas cosas adicionales que debemos conocer de las funciones, como el paso de parmetros o los valores de retorno. Pero antes vamos a explicar dnde debemos colocar las funciones Javascript.

Vemos la manera de insertar las funciones Javascript de cliente dentro de las pginas web.
Las funciones son uno de los principales componentes de los programas, en la mayora de los lenguajes de programacin. En el Manual de Javascript ya hemos comenzado a explicar qu es una funcin y cmo podemos crearla e invocarla en este lenguaje. Ahora vamos a tratar un tema que no es tanto de sintaxis y programacin, sino que tiene ms que ver con el uso correcto y habitual que se hace de las funciones en Javascript, que no es otro que la colocacin del cdigo de las funciones en la pgina web. En principio, podemos colocar las funciones en cualquier parte de la pgina, siempre entre etiquetas <SCRIPT>, claro est. No obstante existe una

limitacin a la hora de colocarla con relacin a los lugares desde donde se la llame. Te adelantamos que lo ms fcil es colocar la funcin antes de cualquier llamada a la misma y as seguro que nunca nos equivocaremos. Existen dos opciones posibles para colocar el cdigo de una funcin: a) Colocar la funcin en el mismo bloque de script: En concreto, la funcin se puede definir en el bloque <SCRIPT> donde est la llamada a la funcin, aunque es indiferente si la llamada se encuentra antes o despus del cdigo de la funcin, dentro del mismo bloque <SCRIPT>. <SCRIPT> miFuncion() function miFuncion(){ //hago algo... document.write("Esto va bien") } </SCRIPT> Este ejemplo funciona correctamente porque la funcin est declarada en el mismo bloque que su llamada. b) Colocar la funcin en otro bloque de script: Tambin es vlido que la funcin se encuentre en un bloque <SCRIPT> anterior al bloque donde est la llamada. <HTML> <HEAD> <TITLE>MI PGINA</TITLE> <SCRIPT> function miFuncion(){ //hago algo... document.write("Esto va bien") } </SCRIPT> </HEAD> <BODY> <SCRIPT> miFuncion() </SCRIPT> </BODY> </HTML> Vemos un cdigo completo sobre cmo podra ser una pgina web donde tenemos funciones Javascript. Como se puede comprobar, las funciones estn en la cabecera de la pgina (dentro del HEAD). ste es un lugar excelente donde colocarlas, porque se supone que en la cabecera no se van a utilizar todava y siempre podremos disfrutar de ellas en el cuerpo porque sabemos

seguro que ya han sido declaradas. Para que quede claro este asunto de la colocacin de funciones veamos el siguiente ejemplo, que dara un error. Examina atentamente el cdigo siguiente, que lanzar un error, debido a que hacemos una llamada a una funcin que se encuentra declarada en un bloque <SCRIPT> posterior. <SCRIPT> miFuncion() </SCRIPT> <SCRIPT> function miFuncion(){ //hago algo... document.write("Esto va bien") } </SCRIPT>