Unidad 15 Frontpage2002

Unidad 15. Programación Javascript, Java, PHP y ASP (II)

Vamos a hacer lo mismo con un código Javascript en dos partes. El código nos permite crear una cajita de búsqueda de texto para nuestra propia página. El código es bastante más extenso que el anterior. Se ha coloreado en verde la parte que, según la web del autor, va en el <HEAD>, y en rojo la parte que va en el <BODY>.

<HTML>
<HEAD><TITLE>Esto es el titulo</TITLE>

<script language="JavaScript">
var NS4 = (document.layers);
var IE4 = (document.all);
var win = window; // Con frames usar top.nombre.window;
var n = 0;

function findInPage(str) {
var txt, i, found;
if (str == "")
return false;

if (NS4) {

if (!win.find(str))
while(win.find(str, false, true))
n++;
else
n++;

if (n == 0)
alert("Not found.");
}

if (IE4) {
txt = win.document.body.createTextRange();

for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) {
txt.moveStart("character", 1);
txt.moveEnd("textedit");
}

if (found) {
txt.moveStart("character", -1);
txt.findText(str);
txt.select();
txt.scrollIntoView();
n++;
}

else {
if (n > 0) {
n = 0;
findInPage(str);
}

else
alert("Not found.");
}
}

return false;
}

</script>
</HEAD>

<BODY>

<p>Bienvenido a mi web personal.</p>

<form name="search" onSubmit="return findInPage(this.string.value);">
<font size="2"><p></font><font size="3">
<input name="string" type="text" size="15" onChange="n = 0;"></font>
<input type="submit" value="Buscar"></p>
</form>

</BODY>
</HTML>

Como podemos comprobar, el código en verde se ha colocado entre las etiquetas <HEAD>, aunque ponerlo antes o después de la línea del título (etiquetas <TITLE>) no importa.

En cambio, dónde esté la cajita de búsqueda es fundamental. El texto en rojo se ha colocado al final para que saliese después del saludo, pero podríamos haberlo colocado antes o, por ejemplo, en una tabla, cambiando de sitio el código. Naturalmente, siempre entre las etiquetas <BODY>.

El código del script anterior se ha mantenido (en negro). Nótese que es independiente uno de otro: podemos colocar tantos scripts como necesitemos.

Este es el resultado:

Pulsa el botón y comprueba que funciona.

La mejor manera de ver esto es en la siguiente animación.

Javascript. Errores comunes.

A veces nos equivocaremos al escribir un código en nuestra página y no funcionará. Lo primero que debemos hacer antes de insertar un script en nuestra web es leer muy bien las instrucciones que el autor del script nos proporcione, y que nos evitará más de un problema.

Cuando existe un error, el navegador nos informa de ello normalmente con una ventana similar a la siguiente:

No obstante el navegador también nos avisará al mostrar el siguiente icono en la barra de estado (pulsando dos veces sobre él se abre la ventana anterior si no se ha abierto).

Podemos ver la línea donde el navegador cree que se encuentra el error y la posible causa. Esto nos orientará acerca de dónde está el error, ya que algunos fallos al escribir un programa desencadenan errores en otras partes del programa, y esto confunde al navegador.

El cómo nos informe el navegador depende de qué navegador estemos usando y de cómo esté configurado.

En este caso, hemos borrado la línea:

var dt = new Date();
del código de nuestra página de pruebas. Esta línea define una variable llamada dt. Como la siguiente línea:

var hr = dt.getHours();

usa esta variable, el navegador nos indica que no podemos usar dt ya que no está definida.

Si tenemos más de un script, como en el ejemplo anterior, debemos asegurarnos de que los scripts usan variables con nombres distintos, ya que si no el navegador podría confundirse.

Utilizar la asignación = en expresiones condicionales en lugar de la comparación == es un error común.

No cerrar una llave o un paréntesis es otro error común.

Debemos terminar cada línea con punto y coma.

No podemos usar una variable si no la hemos inicializado antes.

Pág. 15.2

Aviso legal: Este curso es gratuito siempre que se visualice desde la página Web de aulaClic. No está permitido descargar el curso.