Pido perdon por el fallo de la lección anterior (no explique el último script) aqui está todo espero que no os causara demasiados problemas.
(no hagas una lección si no tienes clara la anterior)
LECCION 3
Los métodos necesitan objetos sobre los que actuar como en esta lección vamos a ver 7 métodos nuevos (getDay(), getDate(), getMonth(), getFullYear(), getHours(), getMinutes(), y getSeconds()) que necesitan objetos sobre los que actuar, este es un buen momento para crear objetos.
Vamos a crear un SCRIPT que muestre la hora y fecha en que entramos a la página donde se encuentre.
Vamos por partes:
// Nuestr objeto : es un comentario de JavaScript (será ignorado por los navegadores que soporten la tecnología JavaScript, eso ya lo vimos antes).
Ahora = new Date (); : en JavaScript los objetos pueden terminar con un retorno de carro (enter o cr) o bien con ";" que nos permite colocar varios objetos en la misma linea.
Ahora es el nombre del objeto que estamos creando,
Date lo que hace es mirar en el sistema la hora y la fecha y new indicar que se guarde en el objeto Ahora. (como cada vez que entramos a la página con el SCRIPT este se ejecuta, siempre veremos la hora que tengamos en ese moménto en nuestro ordenador).
Con la cuarta linea no deberiamos tener problemas, solo es un texto.
Vamos ahora con la linea numero 5 del código (porque es más fácil de explicar y entender que la tercera):
Despues tenemos la misma estructura como instancia que fuera de esta:
aparece el objeto ahora separado por un punto de get y parentesis a la derecha y la primera letra en mayúscula:
Objeto.getDay() = se indica que se obtenga de el objeto el día.
Objeto.getDate() = igual que el anterior pero en este caso se obtendra la fecha.
Objeto.getMonth() = el mes
Objeto.getFullYear() = el año
Objeto.getHours() = la hora
Objeto.getMinutes() = los minutos
Objeto.getSeconds() = los segundos
Es decir lo que hace la quinta linea es decir a JavaScript:
document.write: Escribe en el documento lo que haya dentro de los paréntesis. Y JavaScript escribe:
Ahora.getHours(): el valor de la hora almacenada en Ahora.
Los signos + le indican a JavaScript que vamos a unir valores con texto.
":": como ya hemos visto una cadena de texto, que va entre comillas, porque se mostrará tal como y está, y que nos sirve de separador entre horas y minutos.
Ahora.getMinutes(): el valor de los minutos almacenados en Ahora.
Repetimos la secuencia + ":" + para crear otro separador entre minutos y segundos.
Ahora.getSeconds(): el valor de los segundos almacenados en Ahora.
Una vez entendido esto veamos la linea que falta, la tercera:
Ejercicio de práctica:
Crea una página con un mensaje de bienvenida y una linea mas abajo la fecha (todo en JavaScript).
Solución:
LECCION 4
Hemos visto un poco los "objetos" y los "métodos", conozcamos mas a fondo a lo "eventos"; antes que nada una anotación: los eventos y los controladores de eventos o event handlers son JavaScript, pero están "incorporados" al código html, por si solos no son SCRIPTs, sino pequeñas interfaces entre la página y el lector de la misma. Con estos podras hacer que sucedan "cosillas" que darán vida a tu página.
Vamos a empezar con un evento simple:
No parece muy difícil, ponemos un pequeño código dentro del parámetro onMauseOver de la etiqueta <a> y como valor un pequeño código en JavaScript, veamos que significa: onMauseOver : es el event handler de los eventos de el enlace, esto significa que cada vez que activemos el evento en este caso poner el raton encima del texto de enlace, onMauseOver se disparará y pondrá el evento en funcionamiento. Empecemos con el código "raro":
"window.status='ir a Diseño Web Profesional';return true" : lo que dice este codigo es que en la barra de estado del navegador (window.status (el primero es un objeto, y el segundo una de sus propiedades)) tiene que poner (al activarse el enlace) "ir a diseño web profesional". No has notado la diferencia entre método y atributo ¿verdad? es muy simple, para darle un valor a los métodos este debia ponerse entre parentesis ¿recuerdas? Objeto.metodo(...); a los eventos se les da valor entre comillas después de un igual: Objeto.atributo='...'. a hora nos queda eso de reurn true: lo primero es lo primero, se ha usado un punto y coma para separar los distintos comandos " ; ". Explicar las palabras return true es difícil, esto le indica a el navegador que lea el script que compruebe si la barra de estado esta activada (podria no estarlo), si la respuesta es verdadero (true) el evento ocurre; tal vez ahora no os quede muy claro pero seguro que lo cojeis con unos ejercicios al final como en cada lección.
Para cambiar el color de fondo en JS se usa bgColor=' color ' (es un evento) Intentaremos que al poner el ratón sobre un enlace se cambie el color de fondo a rosa(pink)
Se que es difícil, aqui esta la solución:
Aqui la silución:
Ejercicio de práctica:
Ahora voy a ver de que eres capaz: te voy a dar un nuevo METODO del objeto window, alert() tienes que ponerle un texto dentro, el objetivo es crear un nuevo enlace con esta nueva característica, intenta pensar como hacerlo, es muy fácil.
Solución:
Además tenemos otra opción mas directa (recomiendo que sigamos usando el metodo anterior, simplemente por ser principiantes, aunque esto no nos impide aprenderla):
Pincha aquí
......................................................................................................................................................
LECCION 5
En la lección anterior se ha visto el concepto de un manejador de eventos. Hay bastantes más. Básicamente, todos trabajan igual, así que conociendo su formato y pensando lógicamente, serás capaz de colocarlos donde y como te apetezca.
Visto onMouseOver, es evidente que el próximo tiene que ser onClick. Y si onMouseOver dispara un evento cuando el ratón pasa por encima de algo, ¿qué hará onClick?. Disparar un evento cuando pinches en algo. Dado que ya sabes utilizar el método alert (eso espero), lo utilizaremos para nuestros fines.
El script
Como puedes ver, no hace falta tener una Ingeniería Superior para hacerlo funcionar. Además debe ser evidente a estas alturas, que si cambias un enlace por una imagen, los efectos sucederán cuando pases con el ratón por encima de la imagen, o cuando la pinches. Si quieres aprender más acerca de estos efectos, en Botones Mágicos hay un completo tutorial acerca de esto. De todas formas te recomiendo que acabes primero este tutorial y abordes el de Botones Mágicos después.
También verás que todos los enlaces de esta página están "muertos", no vas a ninguna página cuando los pinchas (salvo los enlaces de los ejercicios y el de Botones Mágicos, claro). Te habrás percatado de que en la barra de estado aparece siempre javascript:nada(). Bien, ese nada() es una función, y eso es precisamente lo que vamos a ver ahora: variables y funciones.
Las variables y las funciones son precisamente lo que le dan "vida" a JavaScript. Puedes fijar los valores que quieras para una variable (dentro de ciertos límites razonables), y si algo no existe, puedes crearlo utilizando funciones.
Empezaremos con las variables. Una variable es, por definición, algo que varía. En JavaScript (y en general en todos los lenguajes de programación) se utilizan para almacenar datos. Y estos datos pueden, y deben, varíar con el tiempo. Por ejemplo:
Llamaremos variable a nuestra variable, y le asignaremos un valor.
variable = 5. Hemos hecho que variable valga 5. Ahora queremos cambiar su valor a 10. Es muy fácil:
variable = 10. Ahora variable vale 10. Supongamos que queremos que variable contenga una cadena de texto:
variable = "cadena de texto". Observa que ahora utilizamos comillas. En otros lenguajes hay que declarar los tipos de variables antes de hacer cualquier cosa. En JavaScript esto no es necesario. JavaScript asigna dinámicamente el tipo de variable según se necesita. Esto es una ventaja en cierto sentido, pero causa también algunos problemas.
También podemos almacenar el resultado de operaciones:
variable = 10 * 5. Ahora variable vale 50. Hay mucho más que aprender acerca de las variables, pero lo iremos viendo poco a poco.
Ahora veamos qué es una función. Básicamente una función es un método (document.write(), te recuerdo) definido por el usuario. Veamos una función simple y algunas de sus particularidades.
El script
Vayamos por partes. Como ves construir una función es sencillo. Solamente necesitas declarar el nombre de la función (en este caso mifuncion()) con la palabra clave function. Observa que el nombre de la función va seguido de paréntesis, y que no he utilizado acentos ni espacios. El "cuerpo" de la función (es decir, el conjunto de instrucciones que se ejecutarán) va encerrado entre llaves { }. Y en el cuerpo de la función hemos colocado un método alert con su correspondiente texto.
Bien, ya tenemos una función, ahora tenemos que hacer que "funcione". En general las funciones hay que "precargarlas". Tú quieres que la función se ejecute correctamente (¿y quién no?), y en el momento necesario. Para conseguir ésto hay que cargar la función al principio de la página. Y al principio quiere decir que debe ser lo primero en cargar. Si recuerdas tu HTML sabrás que lo primero que carga cualquier navegador es la parte del documento que está entre las sentencias <HEAD> </HEAD>. Por lo tanto todas las funciones del documento deben ser "declaradas" dentro del encabezamiento. Con esto conseguimos que estén presentes en la memoria del navegador y su ejecución sea instantánea. Además, si colocamos la función en el cuerpo de la página (en <BODY>) nadie nos asegura que el visitante no va a hacer algo que "dispare" la función antes de que ésta se haya cargado, lo que producirá un error. Así pues, coloca todas las funciones entre las sentencias <HEAD> </HEAD>.
Ahora veremos cómo llamar a la función. Hay varias formas, desde luego. Utilizaremos un enlace porque es probablemente lo que más vas a usar para llamar a las funciones. Esto se hace sencillamente así:
Pincha aquí
Como ves lo único que hemos hecho ha sido substituir la URL del enlace por javascript:mifuncion(). En resumen, en el enlace le decimos al navegador, que en vez de ir a una página, ejecute un comando JavaScript, en este caso nuestra función. Observa que el resultado es el mismo que su utilizáramos onClick. El código completo (HTML y JavaScript) es el siguiente:
Evidentemente esta es una función muy sencilla y no resulta muy útil. Pero vamos a ver rápidamente la utilidad de las funciones. Suponte que quieres mostrar tres líneas de texto seguidas en varias partes de una página. Puedes escribir todo el código así:
¿Y si utilizamos una función?. Entonces quedaría así:
Demos un paso más. Imagínate que queremos cambiar además las fuentes, el color y el tamaño del texto. Acabaríamos con unas líneas de código larguísimas y montones de repeticiones, con la posibilidad de cometer errores. Con la función sólo tenemos que escribir el código una vez, y después lo único que tenemos que hacer es llamar a la función en el momento y en el lugar adecuados. Pero vayamos aún más lejos. Utilizaremos el método alert de nuevo:
El script
Observa lo que hemos hecho. En la función hemos declarado una variable (minombre) y le hemos asignado el valor Jose Angel. Observa que he utilizado comillas para indicar que es una cadena de texto. Después hacemos que el método alert muestre el valor de minombre. Ahora quiero que pienses un poco. Podíamos haber utilizado directamente lo siguiente:
Desde luego el resultado es el mismo. Pero ahora empezarás a ver (si no lo has vislumbrado ya) el poder y la flexibilidad de JavaScript.
Creo que con estos ejemplos el uso de las variables y de las funciones queda bastante claro. Como supongo que te habrás preguntado para qué diablos sirven los paréntesis detrás de la función, veremos un ejemplo más en el que se ilustra su uso:
El script
Dentro de los paréntesis se incluyen los argumentos de la función, es decir, las variables que queremos que maneje la función.
Ahora ten en cuenta que solamente hemos visto la superficie. En la próxima lección vamos a hacer algo de submarinismo, pero antes, ¡cómo no!, aquí están los ejercicios. Sí, me temo que en esta lección hay más de uno. Evidentemente quiero que utilices lo que ya sabes de funciones en ellos.
Ejercicios
Pon tres enlaces en una página. Cada vez que pinches en uno de ellos el color de fondo del documento debe cambiar.
Todos sabemos que el color del fondo por defecto es blanco. Quiero que hagas que el color del fondo por defecto sea amarillo, y que añadas otro enlace, de forma que podamos volver a ver el fondo amarillo, después de haber pinchado en los botones anteriores.
Y ahora quiero que además de cambiar el color del fondo, aparezca una alerta cuyo texto sea el del color del fondo.
Habrás visto que en el tercer ejercicio tenemos un pequeño problema con el texto. El nombre del color sale en inglés, y nosotros no queremos esto ¿verdad?. Más adelante veremos cómo evitar esto con las estructuras de control.
la continuación en una semana mas o menos
Saludos.
(no hagas una lección si no tienes clara la anterior)
LECCION 3
Los métodos necesitan objetos sobre los que actuar como en esta lección vamos a ver 7 métodos nuevos (getDay(), getDate(), getMonth(), getFullYear(), getHours(), getMinutes(), y getSeconds()) que necesitan objetos sobre los que actuar, este es un buen momento para crear objetos.
Vamos a crear un SCRIPT que muestre la hora y fecha en que entramos a la página donde se encuentre.
<SCRIPT LANGUAGE="JavaScript">
Ahora = new Date (); // Nuestro objeto
document.write("Hoy es " + Ahora.getDate() + "-" + (Ahora.getMonth()+1) + "-" + Ahora.getFullYear() + "
");
document.write("Has entrado a esta página exactamente a las ");
document.write(Ahora.getHours() + ":" + Ahora.getMinutes() + ":" + Ahora.getSeconds());
</SCRIPT>Vamos por partes:
// Nuestr objeto : es un comentario de JavaScript (será ignorado por los navegadores que soporten la tecnología JavaScript, eso ya lo vimos antes).
Ahora = new Date (); : en JavaScript los objetos pueden terminar con un retorno de carro (enter o cr) o bien con ";" que nos permite colocar varios objetos en la misma linea.
Ahora es el nombre del objeto que estamos creando,
Date lo que hace es mirar en el sistema la hora y la fecha y new indicar que se guarde en el objeto Ahora. (como cada vez que entramos a la página con el SCRIPT este se ejecuta, siempre veremos la hora que tengamos en ese moménto en nuestro ordenador).
Con la cuarta linea no deberiamos tener problemas, solo es un texto.
Vamos ahora con la linea numero 5 del código (porque es más fácil de explicar y entender que la tercera):
document.write(Ahora.getHours() + ":" + Ahora.getMinutes() + ":" + Ahora.getSeconds());Despues tenemos la misma estructura como instancia que fuera de esta:
aparece el objeto ahora separado por un punto de get y parentesis a la derecha y la primera letra en mayúscula:
Ahora.getAlgo()Objeto.getDay() = se indica que se obtenga de el objeto el día.
Objeto.getDate() = igual que el anterior pero en este caso se obtendra la fecha.
Objeto.getMonth() = el mes
Objeto.getFullYear() = el año
Objeto.getHours() = la hora
Objeto.getMinutes() = los minutos
Objeto.getSeconds() = los segundos
Es decir lo que hace la quinta linea es decir a JavaScript:
document.write: Escribe en el documento lo que haya dentro de los paréntesis. Y JavaScript escribe:
Ahora.getHours(): el valor de la hora almacenada en Ahora.
Los signos + le indican a JavaScript que vamos a unir valores con texto.
":": como ya hemos visto una cadena de texto, que va entre comillas, porque se mostrará tal como y está, y que nos sirve de separador entre horas y minutos.
Ahora.getMinutes(): el valor de los minutos almacenados en Ahora.
Repetimos la secuencia + ":" + para crear otro separador entre minutos y segundos.
Ahora.getSeconds(): el valor de los segundos almacenados en Ahora.
Una vez entendido esto veamos la linea que falta, la tercera:
document.write("Hoy es " + Ahora.getDate() + "-" + (Ahora.getMonth()+1) + "-" + Ahora.getFullYear() + "
");Ejercicio de práctica:
Crea una página con un mensaje de bienvenida y una linea mas abajo la fecha (todo en JavaScript).
Solución:
<SCRIPT LANGUAGE="JavaScript">
hoy = new Date();
document.write("<FONT COLOR='GREEN'>Bienvenido a mi página.
");
document.write("La fecha es: " + hoy.getDate() + "/" + (hoy.getMonth()+1) + "/" + hoy.getFullYear());
</SCRIPT>LECCION 4
Hemos visto un poco los "objetos" y los "métodos", conozcamos mas a fondo a lo "eventos"; antes que nada una anotación: los eventos y los controladores de eventos o event handlers son JavaScript, pero están "incorporados" al código html, por si solos no son SCRIPTs, sino pequeñas interfaces entre la página y el lector de la misma. Con estos podras hacer que sucedan "cosillas" que darán vida a tu página.
Vamos a empezar con un evento simple:
[url="http://perso.wanadoo.es/catwalk/Inicio.html"]Pincha aquí[/url]No parece muy difícil, ponemos un pequeño código dentro del parámetro onMauseOver de la etiqueta <a> y como valor un pequeño código en JavaScript, veamos que significa: onMauseOver : es el event handler de los eventos de el enlace, esto significa que cada vez que activemos el evento en este caso poner el raton encima del texto de enlace, onMauseOver se disparará y pondrá el evento en funcionamiento. Empecemos con el código "raro":
"window.status='ir a Diseño Web Profesional';return true" : lo que dice este codigo es que en la barra de estado del navegador (window.status (el primero es un objeto, y el segundo una de sus propiedades)) tiene que poner (al activarse el enlace) "ir a diseño web profesional". No has notado la diferencia entre método y atributo ¿verdad? es muy simple, para darle un valor a los métodos este debia ponerse entre parentesis ¿recuerdas? Objeto.metodo(...); a los eventos se les da valor entre comillas después de un igual: Objeto.atributo='...'. a hora nos queda eso de reurn true: lo primero es lo primero, se ha usado un punto y coma para separar los distintos comandos " ; ". Explicar las palabras return true es difícil, esto le indica a el navegador que lea el script que compruebe si la barra de estado esta activada (podria no estarlo), si la respuesta es verdadero (true) el evento ocurre; tal vez ahora no os quede muy claro pero seguro que lo cojeis con unos ejercicios al final como en cada lección.
Para cambiar el color de fondo en JS se usa bgColor=' color ' (es un evento) Intentaremos que al poner el ratón sobre un enlace se cambie el color de fondo a rosa(pink)
Se que es difícil, aqui esta la solución:
[url="http://perso.wanadoo.es/catwalk/Inicio.html"]Pincha aquí[/url]Aqui la silución:
[url="http://perso.wanadoo.es/catwalk/Inicio.html"]Pincha aquí[/url] Ejercicio de práctica:
Ahora voy a ver de que eres capaz: te voy a dar un nuevo METODO del objeto window, alert() tienes que ponerle un texto dentro, el objetivo es crear un nuevo enlace con esta nueva característica, intenta pensar como hacerlo, es muy fácil.
Solución:
[url="http://perso.wanadoo.es/catwalk/Inicio.html"]Pincha aqui[/url]Además tenemos otra opción mas directa (recomiendo que sigamos usando el metodo anterior, simplemente por ser principiantes, aunque esto no nos impide aprenderla):
Pincha aquí
......................................................................................................................................................
LECCION 5
En la lección anterior se ha visto el concepto de un manejador de eventos. Hay bastantes más. Básicamente, todos trabajan igual, así que conociendo su formato y pensando lógicamente, serás capaz de colocarlos donde y como te apetezca.
Visto onMouseOver, es evidente que el próximo tiene que ser onClick. Y si onMouseOver dispara un evento cuando el ratón pasa por encima de algo, ¿qué hará onClick?. Disparar un evento cuando pinches en algo. Dado que ya sabes utilizar el método alert (eso espero), lo utilizaremos para nuestros fines.
El script
[url="http://perso.wanadoo.es/catwalk/Inicio.html"]Pincha aquí[/url] Como puedes ver, no hace falta tener una Ingeniería Superior para hacerlo funcionar. Además debe ser evidente a estas alturas, que si cambias un enlace por una imagen, los efectos sucederán cuando pases con el ratón por encima de la imagen, o cuando la pinches. Si quieres aprender más acerca de estos efectos, en Botones Mágicos hay un completo tutorial acerca de esto. De todas formas te recomiendo que acabes primero este tutorial y abordes el de Botones Mágicos después.
También verás que todos los enlaces de esta página están "muertos", no vas a ninguna página cuando los pinchas (salvo los enlaces de los ejercicios y el de Botones Mágicos, claro). Te habrás percatado de que en la barra de estado aparece siempre javascript:nada(). Bien, ese nada() es una función, y eso es precisamente lo que vamos a ver ahora: variables y funciones.
Las variables y las funciones son precisamente lo que le dan "vida" a JavaScript. Puedes fijar los valores que quieras para una variable (dentro de ciertos límites razonables), y si algo no existe, puedes crearlo utilizando funciones.
Empezaremos con las variables. Una variable es, por definición, algo que varía. En JavaScript (y en general en todos los lenguajes de programación) se utilizan para almacenar datos. Y estos datos pueden, y deben, varíar con el tiempo. Por ejemplo:
Llamaremos variable a nuestra variable, y le asignaremos un valor.
variable = 5. Hemos hecho que variable valga 5. Ahora queremos cambiar su valor a 10. Es muy fácil:
variable = 10. Ahora variable vale 10. Supongamos que queremos que variable contenga una cadena de texto:
variable = "cadena de texto". Observa que ahora utilizamos comillas. En otros lenguajes hay que declarar los tipos de variables antes de hacer cualquier cosa. En JavaScript esto no es necesario. JavaScript asigna dinámicamente el tipo de variable según se necesita. Esto es una ventaja en cierto sentido, pero causa también algunos problemas.
También podemos almacenar el resultado de operaciones:
variable = 10 * 5. Ahora variable vale 50. Hay mucho más que aprender acerca de las variables, pero lo iremos viendo poco a poco.
Ahora veamos qué es una función. Básicamente una función es un método (document.write(), te recuerdo) definido por el usuario. Veamos una función simple y algunas de sus particularidades.
El script
<SCRIPT LANGUAJE="JavaScript">
function mifuncion()
{
alert('Hola, que tal')
}
</SCRIPT> Vayamos por partes. Como ves construir una función es sencillo. Solamente necesitas declarar el nombre de la función (en este caso mifuncion()) con la palabra clave function. Observa que el nombre de la función va seguido de paréntesis, y que no he utilizado acentos ni espacios. El "cuerpo" de la función (es decir, el conjunto de instrucciones que se ejecutarán) va encerrado entre llaves { }. Y en el cuerpo de la función hemos colocado un método alert con su correspondiente texto.
Bien, ya tenemos una función, ahora tenemos que hacer que "funcione". En general las funciones hay que "precargarlas". Tú quieres que la función se ejecute correctamente (¿y quién no?), y en el momento necesario. Para conseguir ésto hay que cargar la función al principio de la página. Y al principio quiere decir que debe ser lo primero en cargar. Si recuerdas tu HTML sabrás que lo primero que carga cualquier navegador es la parte del documento que está entre las sentencias <HEAD> </HEAD>. Por lo tanto todas las funciones del documento deben ser "declaradas" dentro del encabezamiento. Con esto conseguimos que estén presentes en la memoria del navegador y su ejecución sea instantánea. Además, si colocamos la función en el cuerpo de la página (en <BODY>) nadie nos asegura que el visitante no va a hacer algo que "dispare" la función antes de que ésta se haya cargado, lo que producirá un error. Así pues, coloca todas las funciones entre las sentencias <HEAD> </HEAD>.
Ahora veremos cómo llamar a la función. Hay varias formas, desde luego. Utilizaremos un enlace porque es probablemente lo que más vas a usar para llamar a las funciones. Esto se hace sencillamente así:
Pincha aquí
Como ves lo único que hemos hecho ha sido substituir la URL del enlace por javascript:mifuncion(). En resumen, en el enlace le decimos al navegador, que en vez de ir a una página, ejecute un comando JavaScript, en este caso nuestra función. Observa que el resultado es el mismo que su utilizáramos onClick. El código completo (HTML y JavaScript) es el siguiente:
<HTML>
<HEAD>
<SCRIPT LANGUAJE="JavaScript">
function mifuncion()
{
alert('Hola, que tal')
}
</SCRIPT>
</HEAD>
<BODY>
[url="javascript:mifuncion()"]Pincha aquí[/url]
</BODY>
</HTML>Evidentemente esta es una función muy sencilla y no resulta muy útil. Pero vamos a ver rápidamente la utilidad de las funciones. Suponte que quieres mostrar tres líneas de texto seguidas en varias partes de una página. Puedes escribir todo el código así:
<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT LANGUAJE="JavaScript">
document.write("Bla, bla, bla...
");
document.write("Ble, ble, ble...
");
document.write("Blu, blu, blu...
");
</SCRIPT>
.......
<SCRIPT LANGUAJE="JavaScript">
document.write("Bla, bla, bla...
");
document.write("Ble, ble, ble...
");
document.write("Blu, blu, blu...
");
</SCRIPT>
</BODY>
</HTML>¿Y si utilizamos una función?. Entonces quedaría así:
<HTML>
<HEAD>
<SCRIPT LANGUAJE="JavaScript">
function mifuncion()
{
document.write("Bla, bla, bla...
");
document.write("Ble, ble, ble...
");
document.write("Blu, blu, blu...
");
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAJE="JavaScript">
mifuncion()
</SCRIPT>
......
<SCRIPT LANGUAJE="JavaScript">
mifuncion()
</SCRIPT>
</BODY>
</HTML>Demos un paso más. Imagínate que queremos cambiar además las fuentes, el color y el tamaño del texto. Acabaríamos con unas líneas de código larguísimas y montones de repeticiones, con la posibilidad de cometer errores. Con la función sólo tenemos que escribir el código una vez, y después lo único que tenemos que hacer es llamar a la función en el momento y en el lugar adecuados. Pero vayamos aún más lejos. Utilizaremos el método alert de nuevo:
El script
<SCRIPT LANGUAJE="JavaScript">
function mifuncion2()
{
minombre="Jose Angel";
alert(minombre);
}
</SCRIPT> Observa lo que hemos hecho. En la función hemos declarado una variable (minombre) y le hemos asignado el valor Jose Angel. Observa que he utilizado comillas para indicar que es una cadena de texto. Después hacemos que el método alert muestre el valor de minombre. Ahora quiero que pienses un poco. Podíamos haber utilizado directamente lo siguiente:
<SCRIPT LANGUAJE="JavaScript">
function mifuncion2bis()
{
alert("Jose Angel");
}
</SCRIPT>Desde luego el resultado es el mismo. Pero ahora empezarás a ver (si no lo has vislumbrado ya) el poder y la flexibilidad de JavaScript.
<SCRIPT LANGUAJE="JavaScript">
function mifuncion3()
{
nombre="Jose Angel";
alert("Hola, " + nombre);
}
</SCRIPT>
<SCRIPT LANGUAJE="JavaScript">
function mifuncion4()
{
nombre1="Jose Angel";
nombre2="Juan";
nombre3="Alfonso";
alert(nombre1);
alert(nombre2);
alert(nombre3);
}
</SCRIPT>
<SCRIPT LANGUAJE="JavaScript">
function mifuncion5()
{
nombre1="Jose Angel";
nombre2="Juan";
nombre3="Alfonso";
alert("Hola, " + nombre1);
alert("Saludos, " + nombre2);
alert("Me alegro de verte, " + nombre3);
}
</SCRIPT>Creo que con estos ejemplos el uso de las variables y de las funciones queda bastante claro. Como supongo que te habrás preguntado para qué diablos sirven los paréntesis detrás de la función, veremos un ejemplo más en el que se ilustra su uso:
El script
<HTML>
<HEAD>
<SCRIPT LANGUAJE="JavaScript">
function Hola(nombre)
{
alert ('Me alegro de verte, ' + nombre);
}
</SCRIPT>
</HEAD>
<BODY>
[url="javascript:Hola('Jose')"]Hola, Jose[/url]
[url="javascript:Hola('Juan')"]Hola, Magda[/url]
[url="javascript:Hola('Magda')"]Hola, Carmen[/url]
</BODY>
</HTML> Dentro de los paréntesis se incluyen los argumentos de la función, es decir, las variables que queremos que maneje la función.
Ahora ten en cuenta que solamente hemos visto la superficie. En la próxima lección vamos a hacer algo de submarinismo, pero antes, ¡cómo no!, aquí están los ejercicios. Sí, me temo que en esta lección hay más de uno. Evidentemente quiero que utilices lo que ya sabes de funciones en ellos.
Ejercicios
Pon tres enlaces en una página. Cada vez que pinches en uno de ellos el color de fondo del documento debe cambiar.
Todos sabemos que el color del fondo por defecto es blanco. Quiero que hagas que el color del fondo por defecto sea amarillo, y que añadas otro enlace, de forma que podamos volver a ver el fondo amarillo, después de haber pinchado en los botones anteriores.
Y ahora quiero que además de cambiar el color del fondo, aparezca una alerta cuyo texto sea el del color del fondo.
Habrás visto que en el tercer ejercicio tenemos un pequeño problema con el texto. El nombre del color sale en inglés, y nosotros no queremos esto ¿verdad?. Más adelante veremos cómo evitar esto con las estructuras de control.
la continuación en una semana mas o menos
Saludos.