Curso gratis de FrontPage 2003. Unidad 15. Programación Javascript, Java, PHP y ASP. (II)

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:

Ejemplo

Pulsa el botón y comprueba que funciona.

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 y utilizarlo en academias o centros de enseñanza privados sin estar conectado a Internet.