Insertar código en varios lugares

Anuncio
©
Reservados todos los derechos. El contenido de esta obra está inscrito en el registro territorial de la propiedad intelectual de
la Comunidad de Madrid con nº M-006417/2006.
Este material es para uso personal por parte del alumno que esté realizando este curso. Queda prohibido por el autor
reproducir, plagiar o distribuir esta obra sin la preceptiva autorización.
Insertar código en varios lugares
Cuando comencemos a crear guiones más complejos, necesitaremos introducir
código JavaScript en distintos lugares del documento HTML. Vamos a ver cómo
llevar a cabo esta tarea con una sencilla práctica en la que se repasará el uso de
las variables y los comentarios.
Se trata de crear una ventana de alerta en la que aparezca un mensaje cuyo valor
pasaremos desde una variable.
<HTML>
<HEAD>
<TITLE>Ejercicio nº4</TITLE>
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
mensaje = "Hola, este es el ejercicio de la lección nº 3 del
curso de programación web"
</SCRIPT>
</HEAD>
<BODY BGCOLOR="WHITE">
<p>Esto es un ejemplo del uso del método alert()</p>
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
alert(mensaje)
</SCRIPT>
</BODY>
</HTML>
Abre el bloc de notas o cualquier editor de texto sencillo. Introduce el
texto que tienes a continuación, para empezar con una página web en
blanco. Sería bueno guardar este fichero para utilizarlo como plantilla
en las prácticas posteriores, y así no tener que escribirlo una y otra
vez.
<HTML>
<HEAD>
<TITLE> Ejercicio nº4</TITLE>
</HEAD>
<BODY BGCOLOR="WHITE">
<p>Esto es un ejemplo del uso del método alert()</p>
</BODY>
</HTML>
Vamos a introducir el primer fragmento de código (recuerda que el
código JavaScript siempre se introduce entre las etiquetas <SCRIPT> y
</SCRIPT>). Crearemos una variable llamada mensaje que contendrá
el texto que queramos ver en la ventana de alerta. El lugar más idóneo
para definir variables es la cabecera de la página web, entre las
etiquetas <HEAD> y </HEAD>.
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
Primeros pasos
©
Reservados todos los derechos. El contenido de esta obra está inscrito en el registro territorial de la propiedad intelectual de
la Comunidad de Madrid con nº M-006417/2006.
Este material es para uso personal por parte del alumno que esté realizando este curso. Queda prohibido por el autor
reproducir, plagiar o distribuir esta obra sin la preceptiva autorización.
En el siguiente paso, introducimos el código JavaScript que hará
saltar la ventana de alerta entre las etiquetas <BODY> y </BODY>.
Para este fin, haremos uso del método alert(), que disparará una
ventana de alerta con el mensaje "Hola, este es el ejercicio de
la lección nº 3 del curso de programación web” incluido en la
variable mensaje.
mensaje = "Hola, este es el ejercicio de la lección nº 3 del
curso de programación web"
Y por último, se cierra la etiqueta SCRIPT.
</SCRIPT>
Guarda el documento como ejercicio-1.html y ábrelo con un
navegador. El resultado ha de ser este:
Observa que se ve el texto de la página y también la ventana.
Vamos a ver qué ocurre si colocamos el código JavaScript antes del
párrafo:
<BODY BGCOLOR="WHITE">
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
alert(mensaje)
</SCRIPT>
<p>Esto es un ejemplo del uso del método alert()</p>
Primeros pasos
©
Reservados todos los derechos. El contenido de esta obra está inscrito en el registro territorial de la propiedad intelectual de
la Comunidad de Madrid con nº M-006417/2006.
Este material es para uso personal por parte del alumno que esté realizando este curso. Queda prohibido por el autor
reproducir, plagiar o distribuir esta obra sin la preceptiva autorización.
</BODY>
Para ver mejor la diferencia, cambia el texto del mensaje en la
cabecera de la página, por ejemplo:
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
mensaje = "Esta ventana sale antes que la página web"
</SCRIPT>
Guarda el fichero como ejericio-2.html y ábrelo en el navegador.
Deberías ver algo como esto:
¡Sale la ventana antes que el texto!
Primeros pasos
Descargar