Alesna webbutveckling

Javascript

Animeringar

Textvågen

Javascript och stilar

Kalendern

Dom - Hemliga länkar

I nästa stycke, så kan du se två länkar. Om du trycker ner tangent "d", så byts länkarna ut mot hemliga länkar. Trycker du ner tangen "f", så återkommer de vanliga länkarna.

Hur fungerar detta nu då?

om vi för ett ögonblick utnämner webbdesignern till användare, så skulle han (visst kan en webbdesigner också vara en hon)kunna utforma sin sida på följande sätt. I händelsehanteraren onload i bodyinstruktionen, så behöver han göra ett anrop på javascriptsfunktionen createUrl();
<body onLoad="createUrls();">
createUrls är förstås en funktion, som vi måste skriva själva, eller kopiera och klista in från denna sida. Vi ska kika närmare på funktionen lite längre ner. Samtliga länkar på sidan utformas enligt följande:
<a href="ordinarie_sida.html*hemlig_sida.php">länk till den vanliga sidan|länk till den hemliga sidan</a>
Urlerna är avdelade med en stjärna och texten i länkarna är avdelade med en pipa |. När du har blivit bekant med koden, så kan du lätt ändra på detta och använda andra tecken.

Strategin

Jag valde följande strategi för åstadkomma det jag ville. Jag börjar med att loopa igenom samtliga länkar på sidan. Det är enkelt, eftersom länkarna kan nås via document.links.

Man skulle kunna tänka sig att lägga in någon mekanism för att välja ut vissa länkar på en sida, om man nu händelsevis inte vill ha hemliga länkar över allt. Jag lämnar detta som en övningsuppgift åt dig, käre besökare.

Länkarnas adresser "href" splittas runt stjärnan * och läggs in i två arrayer, en för ordinarie länkar och en för hemliga länkar. Sak samma gör jag med det som står i länken. Denna text kommer man åt via "innerHTML". Samtidigt passar jag på att lägga in den ordinarie adressen och den ordinarie texten i länkarna. Det är i korthet, vad som händer i createUrls.
Sedan gäller det förstås att fånga händelsen keypress. Här uppstår en del kompabilitetsproblem (Firefox/Explorer vad annars?). I Explorer finns ett inbyggt objekt, som heter window.event. Via detta objekt kan man t.ex. komma åt vilken tangent en besökare har tryckt ner eller släppt upp. Detta objekt finns inte i Firefox, utan motsvarande argument kommer som ett argument till den callback (funktion), som anges i händelsehanteraren.
I callbacken kan man pröva vilken browser det är, som håller sidan, genom att kolla upp sanningsvärdet i window.event. Är detta sant, så har vi med Explorer att göra, annars Firefox.
Då var det dags för lite kod.

<script>
/* 
Dom första två raderna innebär att jag kopplar en tangentbordhändelse
för dokumentet till en callback (händelsehanterare). Tanken är
att "d" ska plocka fram de hemliga länkarna och "f" ska ta bort dom
igen.
Sedan deklarerar jag fyra arrayer för att lagra uppgifter om vanliga länkar
och hemliga länkar. Det gäller både adresserna och det som besökarna på sidan
kan se.
*/
document.onkeypress=secretPress;
ordinary = new Array();
secret= new Array();
ordinary_names=new Array();
secret_names=new Array();

/*
Funktionen secretPress har angets som callback i 
händeleshanteraren ovan. Här prövas vilken
browser som håller sidan. Du kan läsa mer om detta
i stycket ovan. I funktionen tar vi också reda på
vilken tangent, som har tryckts ned. Värdet lagras
i variabeln kod, som skickas som argument till
funktionen changeUrls()
*/
function secretPress(ev)
{
	kod="";
	if(window.event)
	{
		e=event;
		kod = e.keyCode;
	}
	else
	{
		e=ev;
		kod=e.charCode;
	}
changeUrls(kod);
}

/*
I funktionen changeUrls undersöks först vilken
tangent, som har tryckts ned. Värdena för dessa
"100" och "102" har jag i det här fallet helt enkelt prövat mig
fram till. I funktionen ligger två arrayer, som beroende
på tangent ställs till antingen de hemliga värdena
eller de ordinarie.
Sist men inte minst, så loopas dokumentets länkar
igenom och tilldelas de av besökaren valda värdena.
*/
function changeUrls(tangent)
{
	aktuella_linkar=new Array();
	aktuella_namn= new Array();
	if(tangent=="100")
	{
		aktuella_linkar=secret;
		aktuella_namn=secret_names;
	}
	if(tangent=="102")
	{
		aktuella_linkar=ordinary;
		aktuella_namn=ordinary_names;
	}
	if(tangent=="100" || tangent=="102")
	{
		for(i=0;i<document.links.length;i++)
		{
			document.links[i].href=aktuella_linkar[i];
			document.links[i].innerHTML=aktuella_namn[i]
		}
	}
}
/*
Funktionen createUrls anropas från onLoad i bodyinstruktionen. Här loopas dokumentets
länkar igenom. Adresserna splittas runt stjärnan * och texterna splittas runt pipan |.
Delarna hamnar i arrayerna, som deklarerats ovan.
Du kan också se att adresserna substrängas, vilket tar bort en massa onödig information,
om man kör dokumentet som fil, dvs. inte som en url.  Det kan se ut på följande sätt:
file:///c://map/sidan.html*hemlig.html. I och för sig, så är det en ganska onödig operation,
eftersom browsern lägger tillbaka den första delen igen, men det störde mitt sinne för
estetiska värden. För de som känner mig, så innebär detta en sällsynt kraftig störning(-:
Sist men inte minst, så sätts länkarna på sidan till sina ordinarie värden.
*/
function createUrls()
{
	for(i=0;i<document.links.length;i++)
	{
		str = document.links[i].href;
		str = str.substring(str.lastIndexOf("/")+1);
		arr = str.split("*");
		ordinary[i]=arr[0];
		secret[i]=arr[1];
		names = document.links[i].innerHTML.split("|");
		ordinary_names[i]=names[0];
		secret_names[i] = names[1];
		document.links[i].innerHTML =ordinary_names[i];
		document.links[i].href=ordinary[i];
	}
}


</script>