HTML de Guerra. Javascript Omnipresente – Clases Prácticas de HTML VII

Bueno, yo en realidad no sabía de qué más escribir, pero afortunadamente nos llegó un comentario de willin, de Iquique, Chile, que nos solicitaba dos cosas, entre ellas como hacer para que un javascript se pudiera actualizar a lo largo de todo el sitio sin tener que codificar todo el site de nuevo.

Manos a la obra. Ya hemos visto como se hace esto con el css y lo conveniente que es. Para el Javascript, al cual llamaremos js de ahora en adelante, es muy similar la cosa.

Digamos que tenemos nuestra consabida página index.html:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<link href=”estilo.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
Esta es nuestra página index.html
</body>
</html>

Ya en ella vemos el css en todo el sitio. Ahora digamos que le metemos un js sencillo, algo como el script de tiempo que tenemos en NugBar:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<link href=”estilo.css” rel=”stylesheet” type=”text/css”>
<SCRIPT Language=”JavaScript”>
<!– Hide

/*
This script was written by Mike Cullen, 1999
Featured on Dynamic Drive (dynamicdrive.com)
For full source code, installation instructions
and many more DHTML scripts
Visit Dynamicdrive.com
*/

var scroller;
var ampm;
var actualtitle=document.title+” ”
function antiMilitaryTime()
{
if (hr == “12”){
ampm=”p.m.”
}
else if (hr == “13”){
hr=”1″
ampm=”p.m.”
}
else if (hr == “14”){
hr=”2″
ampm=”p.m.”
}
else if (hr == “15”){
hr =”3″
ampm=”p.m.”
}
else if (hr == “16”){
hr = “4”
ampm=”p.m.”
}
else if (hr == “17”){
hr = “5”
ampm=”p.m.”
}
else if (hr == “18”){
hr = “6”
ampm=”p.m.”
}
else if (hr == “19”){
hr = “7”
ampm=”p.m.”
}
else if (hr == “20”){
hr = “8”
ampm=”p.m.”
}
else if (hr == “21”){
hr = “9”
ampm=”p.m.”
}
else if (hr == “22”){
hr = “10”
ampm=”p.m.”
}
else if (hr == “23”){
hr = “11”
ampm=”p.m.”
}
else if (hr == “24”){
hr = “12”
}
}
function addZero(){
if (min <= “9”){
min = “0”+min
}
if (sec<= “9”){
sec = “0”+sec
}
if (hr <=9){
hr = “0”+hr
}
}
function time(){
dt=new Date()
sec=dt.getSeconds()
hr=dt.getHours()
ampm=”a.m.”
min=dt.getMinutes()
}
function scroll() {
time()
antiMilitaryTime()
addZero()
var scroller=”- “+hr+”:”+min+”:”+sec+” “+ampm
var timeout=setTimeout(“scroll()”, 1000)
document.title=actualtitle+scroller
}
if (document.all||document.getElementById)
scroll()
//–>
</SCRIPT>
</head>
<body>
Esta es nuestra página index.html
</body>
</html>

Y ahora digamos que no queremos eso en nuestra página, sino que queremos usar el mismo truco que con el css. Lo que hacemos es crear un archivo de texto que termine en .js, por ejemplo tiempo.js. Para este ejercicio, lo hemos guardado en el mismo directorio que index.html

En este archivo tiempo.js escribimos el contenido de los tags <script></script>, pero le quitamos esos tags, de manera que el contenido del archivo tiempo.js seria solamente:

/*
This script was written by Mike Cullen, 1999
Featured on Dynamic Drive (dynamicdrive.com)
For full source code, installation instructions
and many more DHTML scripts
Visit Dynamicdrive.com
*/

var scroller;
var ampm;
var actualtitle=document.title+” ”
function antiMilitaryTime()
{
if (hr == “12”){
ampm=”p.m.”
}
else if (hr == “13”){
hr=”1″
ampm=”p.m.”
}
else if (hr == “14”){
hr=”2″
ampm=”p.m.”
}
else if (hr == “15”){
hr =”3″
ampm=”p.m.”
}
else if (hr == “16”){
hr = “4”
ampm=”p.m.”
}
else if (hr == “17”){
hr = “5”
ampm=”p.m.”
}
else if (hr == “18”){
hr = “6”
ampm=”p.m.”
}
else if (hr == “19”){
hr = “7”
ampm=”p.m.”
}
else if (hr == “20”){
hr = “8”
ampm=”p.m.”
}
else if (hr == “21”){
hr = “9”
ampm=”p.m.”
}
else if (hr == “22”){
hr = “10”
ampm=”p.m.”
}
else if (hr == “23”){
hr = “11”
ampm=”p.m.”
}
else if (hr == “24”){
hr = “12”
}
}
function addZero(){
if (min <= “9”){
min = “0”+min
}
if (sec<= “9”){
sec = “0”+sec
}
if (hr <=9){
hr = “0”+hr
}
}
function time(){
dt=new Date()
sec=dt.getSeconds()
hr=dt.getHours()
ampm=”a.m.”
min=dt.getMinutes()
}
function scroll() {
time()
antiMilitaryTime()
addZero()
var scroller=”- “+hr+”:”+min+”:”+sec+” “+ampm
var timeout=setTimeout(“scroll()”, 1000)
document.title=actualtitle+scroller
}
if (document.all||document.getElementById)
scroll()

Luego, esto lo enlazamos a nuestro archivo index.html de la siguiente manera:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<link href=”estilo.css” rel=”stylesheet” type=”text/css”>
<script language=”JavaScript” src=”tiempo.js”></script>
</head>
<body>
Esta es nuestra página index.html
</body>
</html>

Y listo! Toda página a la cual le enlaces el archivo tiempo.js, tendrá el mismo efecto. Y si lo editas, todas cambiarán. Lo bueno de este sistema es que puedes ir metiendo todo el js que quieras en ese mismo archivo, no tienes que hacer uno de tiempo.js, otro de popup.js, otro de onmouseover, etc.

Lo que sí debes tener en cuenta es que para activarlo, es como si lo tuvieras en el header, si el js se activa en el evento onLoad, de todos modos tienes que ponerle onLoad a todas las páginas. Eso si puede resultar tedioso.

Pero bueno, algo tenía que ser tedioso no?

Deja un comentario

A %d blogueros les gusta esto: