JavaScript-skolan Fönsterkontroll

1. Inledning

Den här sidan går igenom de mest grundläggande begreppen kring fönster, som i JavaScript är objekt med namnet window.

2. Objektet window

Du har redan träffat på objektet window många gånger på de här sidorna om JavaScript. Det är nämligen det mest grundläggande objektet i en DOM. De andra objekten kräver ju (med några få undantag) ett fönster för att kunna existera.

När man bara har ett fönster öppet kan man ofta utelämna window i koden:

window.document.forms[0].textruta.value

kan i stället skrivas:

document.forms[0].textruta.value

I och med objektet windows grundläggande funktion finns det också väldigt många olika underliggande objekt, egenskaper, metoder och händelser som går att tillämpa på det. Koden blir därför ganska snart komplicerad och omfångsrik.

En sak är viktig att komma ihåg och det är att man bara kan skapa nya fönster om det redan finns minst ett fönster öppnat. Det fösta fönstret är det dock bara webbläsaren själv som kan öppna.

Därför brukar man säga att man med JavaScript bara kan öppna underliggande fönster, s.k subwindows. Man använder dock inte detta ord i JavaScript, som vi nu skall se.

3. Skapa ett nytt fönster

Vi börjar med ett väldigt enkelt exempel. Det påminner om Html-kommandot target="_blank":

Exempel 1

<script language="JavaScript">
<!--
var NyttFonster = window.open("webbsida.html");
-->
</script>

Titta på exemplet i praktiken >

Här talar jag om att variabelns värde är att med metoden applicerad på webbläsarfönstret öppna sidan "webbsida.html". Denna öppnas alltså i ett nytt fönster.

Metoden kan även innehålla flera parametrar, vilket gör att man kan ändra storleken och andra saker. Det visar jag i nästa avsnitt.

4. Anpassa fönstrets storlek

Exempel 2

<script language="JavaScript">
<!--
var NyttFonster = window.open("webbsida.html", "Fonster", "width=300, height=400");
-->
</script>

Titta på exemplet i praktiken >

Observera att bredden och höjden skrivs som ett och samma uttryck. Man skriver också in en definition efter metoden open(). Tar man bort den fungerar inte metoden korrekt.

Variabelns värde blir globalt och gäller i båda fönstren. Detta kommer att få större betydelse då vi så småningom arbetar med referens till objekt i andra fönster.

5. Anpassa fönstrets verktygsfält

Förutom att man kan styra själva fönstrets storlek och vilken sida som skall laddas, kan man ofta också anpassa fönstrets "inkråm". Det engelska ordet som ofta används är "chrome".

Vi bygger vidare på samma script:

Exempel 3

<script language="JavaScript">
<!--
var NyttFonster = window.open("webbsida.html", "Fonster3", "width=300, height=400, toolbar=no, status=yes, resizeable=yes");
-->
</script>

Titta på exemplet i praktiken >

Observera att man bygger vidare på uttrycket för bredd och höjd. Ett felaktigt inskrivet citationstecken gör att scriptet slutar fungera!

Vi vänder på kuttingen och skriver nu så här:

Exempel 4

<script language="JavaScript">
<!--
var NyttFonster = window.open("webbsida.html", "Fonster4", "width=300, height=400, toolbar=yes, status=no, resizeable=no");
-->
</script>

Titta på exemplet i praktiken >

Tänk också på att alla webbläsare inte kallar sina objekt för samma saker och kanske inte heller tillåter att man styr alla objekt - eller att man styr dem på samma sätt.

Nedan ser du ett enkelt schema över fönstrets delar. Ni får stå ut med att jag hämtat det hela från en webbläsare som heter Safari för Mac OS X:

Vad är det vi ser på bilden?

Överst hittar vi namnlisten, där sidans titel står. I vissa program hänger den ihop med menubar, alltså "menyraden".

Det som kallas toolbar och som på svenska blir ungefär "verktygsfält", med knappar för att gå tillbaka, framåt, ladda om sidan, osv.

Denna kallas för location bar eller "adressfältet" och visar alltså den adress man befinner sig på.

Här kan finnas en mängd andra fält, t.ex personalbar. Under menyn med namn som "Visa", "View", "Innehåll" och liknande hittar man sådana alternativ. Bockar man för dem visas de på skärmen.

Detta är självklart rullningslisten, som på engelska kallas scrollbar.

Själva dokumentfönstret, document window. Här är det väldigt litet för att få plats på den här sidan.

Längst ner finns statusfältet eller statusbars.

Vi tittar på om samtliga går att styra genom att försöka stänga av dem alla:

Exempel 5

<script language="JavaScript">
<!--
var NyttFonster = window.open("webbsida.html", "Fonster5", "width=300, height=400, menubar=no, toolbar=no, locationbar=no, personalbar=no, scrollbars=no, status=no, resizeable=no");
-->
</script>

Titta på exemplet i praktiken >

Observera att alla statusfält heter något i singular, med undantag för scrollbars, som är två.

Menyraden går oftast inte att stänga av, men de övriga brukar man kunna rå på, tack vare att de har egenskapen visible. Denna kan i sin tur ha värdena yes eller no.

Tänk dock på att framförallt Microsofts webbläsare ofta ger möjligheter att detaljstyra varje verktygsfält, t.ex stänga av eller visa vissa knappar. Det går jag dock inte in på här.

Normalt sett vill man kanske bara öppna nytt fönster och stänga av vissa verktygsfält. Har man större krav finns det böcker och sajter som ger mer inträngande analyser.

I Danny Goodmans bok "JavaScript Bible" finns gott om exempel på hur man kan styra de olika verktygsfälten. Han ger också prov på hur man kan använda JavaScript för att kontrollera vilka verktygsfält som visas och sedan anpassa fönstret efter det.

De exempel han ger, liksom många av dem man hittar på webben, är dock ofta flera sidor långa. Jag återger därför inte sådana script här, eftersom de tar för mycket plats. Man kan dock surfa vidare själv. På min sida med surftips hittar du sådana länkar. Läs mer >

6. Statusfältet

En av de lite enklare sakerna att anpassa är text som visas på statusfältet, alltså längst ner på webbsidan. Den egenskap som används är "window.status":

Exempel 6

<body onLoad="window.status='Välkommen till min sajt!';">

Titta på exemplet i praktiken >

Observera att statusfältet måste visas på skärmen. Du ser hur det ser ut i bilden.

Man kan naturligtvis även skapa denna effekt då besökaren för muspekaren över en länk:

Exempel 7

<a href="webbsida.html" onMouseover="window.status='Tillbaka till startsidan';" onMouseOut="window.status = ''; return true;"><img src="bild.gif" alt=""></a>

Titta på exemplet i praktiken >

Här använder jag en onMouseOut-funktion för att texten skall försvinna när muspekaren lämnar bilden. Det behövs kanske inte och man kan experimentera med att ta bort detta kommando. Har man med det måste man emellertid använda "return true" också.

Det går även att lägga in en permanent text i statusfältet med egenskapen defaultStatus:

Exempel 8

<body onLoad="window.defaultStatus='Du besöker just nu Jonas Webresurs!'">

Titta på exemplet i praktiken >

Jag har dessutom kombinerat det med förra exemplet. Som du förhoppningsvis ser visas meddelandet i "window.defaultStatus" tills dess att man för muspekaren över bilden, då meddelandet i "window.status" visas.

7. Metoderna substring och slice

Man kan också få texten att röra sig i sidled längs statusfältet, ungefär som en textremsa. Följande exempel visar detta:

Exempel 9

<script language="JavaScript">
<!--
var Meddelande = "Välkommen till Jonas Webresurs - Sveriges bästa IT-utbildningssajt! ";
function RullaText() {
window.status = Meddelande;
Meddelande = Meddelande.substring(1,Meddelande.length) + Meddelande.substring(0,1);
setTimeout("RullaText()", 200);
}
-->
</script>

+

<body onLoad="RullaText()">

Titta på exemplet i praktiken >

Vad betyder allt detta?

window.status = Meddelande;

Denna sats innebär att variabeln Meddelande visas i statusfältet. Om vi utgår från första bokstaven så står där alltså ett "V". Det som får texten att rulla är sedan följande:

Meddelande = Meddelande.substring(1,Meddelande.length) +
Meddelande.substring(0,1);

Denna sats säger att Meddelande skall tilldelas ett värde, som bestäms av en sub- eller delsträng. Värdet som skall visas består av två delar. Den första utgörs av:

Meddelande.substring(1,Meddelande.length)

Den talar om att substrängen skall returnera ett värde som börjar på andra tecknet i strängen (man räknar ju från noll). Hela strängen som skall användas är Meddelandets fulla längd (.length).

I nästa del behandlas det första tecknet, som placeras efte de övriga tecknen i strängen, alltså sist:

Meddelande.substring(0,1)

På det här viset har nu Meddelande fått en ny första bokstav, som visas som "ä". Fördröjningen mellan det att "V" och "ä" visas sker med följande sats:

setTimeout("RullaText()", 200);

Ju lägre siffra desto kortare tid tar det mellan varje steg och ju fortare rör sig texten.

För att du skall förstå metoden substring() lite bättre har jag gjort ett enklare exempel som är ganska lätt att följa:

Man kan också få texten att röra sig i sidled längs statusfältet, ungefär som en textremsa. Följande exempel visar detta:

Exempel 10

<script language="JavaScript">
<!--
var MeddelandeText = "Välkommen till min sajt!";
document.write(MeddelandeText + "<br/>");
document.write(MeddelandeText.substring(0,9) + "<br/>");
document.write(MeddelandeText.substring(15,23) + "<br/>");
document.write(MeddelandeText.slice(0.-5) + "<br/>");
-->
</script>

Titta på exemplet i praktiken >

De fösta två raderna är ju välkända vid det här laget. Först anger jag en variabel med värdet i form av en textsträng. På nästa rad skrivs denna sträng ut i webbläsaren.

Sedan följer två rader där metoden substring() används. Den tillämpas på en textsträng, i det här fallet MeddelandeText. Först skrivs de första tio tecknen ut, dvs "Välkommen", sedan skrivs "min sajt!" ut med nästa rad, alltså tecknen 15 till 23.

Det som står innanför metodens parentes talar om vilket första värdet är och på vilket tecken i strängen som metoden skall stanna.

Metoden slice() på minner om substring, men accepterar också negativa tal. Sådana räknas då från slutet av strängen och baklänges. Denna sats returnerar alltså "Välkommen till min sajt!".

Totalt skrivs alltså följande ut (dock inte i alla webbläsare):

Nåväl, vi återgår till exemplet med rullningen igen. Man kan också stoppa rullningen efter en viss tid. Man använder då en räknare som håller reda på de steg som rullningen har gått igenom.

Exempel 11

<script language="JavaScript">
<!--
var Meddelande = "Välkommen till Jonas Webresurs - Sveriges bästa IT-utbildningssajt! ";
var count = Meddelande.length;
var counter = 0;
function RullaText() {
if (counter < count + 1) {
window.status = Meddelande;
Meddelande = Meddelande.substring(1,Meddelande.length) + Meddelande.substring(0,1);
setTimeout("RullaText()", 200);
counter++;
}
}
-->
</script>

+

<body onLoad="RullaText()">

Titta på exemplet i praktiken >

Tilläggen visas här med röd textfärg. Här skapas först två variabler: count som sätts till meddelandets längd, samt counter som sätts till noll.

If-satsen säger att funktionen skall köra tills dess att värdet hos counter är mindre än meddelandets längd (count) + 1. Värdet hos counter ökar sedan med ett varje gång funktionen körs.

Totalt kommer texten att rullas två gånger. I vissa webbläsare stannar den sedan kvar, men försvinner i andra.

8. Övningar

Övning 1
Undersök vilka verktygsfält som finns i din webbläsare. Leta under menyn Visa/View/Innehåll och försök se vad de kallas och är till för.

Övning 2
Skapa ett script som öppnar en länk i ett nytt fönster. Det nya fönstret skall vara 500 pixlar brett, 300 pixlar högt, något som inte skall gå att ändra på. Menyrad och statusfält skall vara aktiverade, men alla andra skall vara avstängda.

Facit >

Övning 3
Skapa en knapp eller länk som, när man klickar på den, öppnar ett nytt fönster. Använd samma inställningar som i förra övningen!

Facit >

Övning 4
Utgå ifrån Exempel 7 och 8 och skapa dels en default-text i statusfältet, samt lägg in två bilder som var och en visar olika texter i statusfältet då muspekaren förs över dem.

Facit >

Övning 5
Nästa uppgift är att skapa en rullande text i statusfältet. Texten skall vara "Välkommen!". Försök få den att rulla 5 gånger!

Facit >