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
