Introduktion till JavaScript
Del 2



Egenskapen onMouseOver


Du kan se nästa finess i JavaScript genom att föra muspekaren över den här länken. Titta på statusraden längst ner på sidan. Du kan kombinera det här med andra JavaScript-funktioner. Om du rör muspekaren över denna länk kommer ett fönster att öppnas. Nu ska jag visa koden för dessa två effekter: 
<a href="stupid.htm" onMouseOver="window.status='Just another stupid link...';
 return true">

Det enda du behöver göra är att lägga till egenskapen onMouseOver i <a>-koden. 'Window.status' låter dig skriva saker på statusraden på din internet-läsare. Som du kan se måste man alternera mellan ' och ". Man kan inte använda " hela tiden för då vet inte JavaScript var strängen man vill skriva i statusfältet börjar och slutar. Efter strängen måste man skriva ;return true.
Det andra exemplet använder JavaScript till att anropa funktionen alert. Här är koden: 
<html>
<head>
<script language="JavaScript">
<!-- Hiding
     function hello() {
       alert("Hello!");
     }
// -->
</script>
</head>
<body>
<a href="" onMouseOver="hello()">link</a>
</body>
</html>

Det här är ganska enkelt. Det använder metoden onMouseOver och funktionen hello() anropas när händelsen inträffar.

Fler datum-funktioner


Nu vill jag visa ett annat exempel där vi använder tid- och datum-metoder. Du har redan sett hur egenskapen lastModified fungerar. Nu ska vi skriva tid och datum på vårt dokument. Den här metoden använder din dators tid och datum, så om den är inställd på 1983-05-17 kommer det att bli fel på sidan också. Det är alltså inte ett internet-datum (eller liknande).

Här är koden: 

<script language="JavaScript">
<!-- Hiding
  today = new Date()
  document.write("The time now is: ",today.getHours(),":",today.getMinutes())
  document.write("
The date is: ", today.getMonth()+1,"/",today.getDate(),"/",today.getYear());
// end hiding contents -->
</script>

Först skapar vi en datum-variabel. Detta gör vi med today=new Date(). Om vi inte specificerar ett datum använder läsaren det lokala datumet och tilldelar variabeln today det värdet. Lägg märke till att vi inte behöver deklarera variabeln today någonstans. Det är en skillnad mot Java och de flesta andra programmerings-språk där man måste tala om vilka variabler man vill använda innan man använder dem. Vi har skapat ett tids-objekt som innehåller lokal tid och datum. Nu kan vi enkelt skriva innehållet i ett dokument. Man måste skriva today före varje get...-metod, annars kommer inte internet-läsaren att veta vilket objekt man syftar på. Metoden getMonth() returnerar ett nummer mellan 0 och 11 (0 står för januari och 11 för december). Därför måste vi addera 1 till det returnerade talet för att få rätt månad.
Det kan vara intressant att skapa ett datum, t ex det datum du skapade ett dokument. Sen kan du räkna ut hur många dagar senare som någon läser det. Om det är mer än 10 dagar kan du säga: Hörru, det här är gammalt, läs det inte!
Till detta behöver du dagens datum, som i exemplet ovan, och det datum du skapade dokumentet. Du kan specificera ett datum när du skapar objektet. Det ser ut så här: docStarted= new Date(96,0,13)
Du måste specificera året först, sen månaden (kom ihåg att minska månaden med ett!), och sist dagen. man kan också specificera tiden: docStarted= new Date(96,0,13,10,50,0)
De första siffrorna är fortfarande datumet. Därefter följer timmar, minuter och sekunder.

Jag vill tala om att JavaScript inte har någon riktig datum-typ. Men som du ser går det fint att arbeta med datum. Det fungerar därför att datum är representerade av antal millisekunder sedan 1970-01-01 00:00. Det låter komplicerat, men det är ett vanligt sätt att representera datum i datorer. Du behöver inte bry dig om detta. Du behöver bara bry dig om funktionerna och de är inte ett dugg svåra att förstå. Jag ville bara tala om detta så att du inte tycker att jag säger något som är fel.

Slumptal

Ett vanligt problem är hur man kan använda slumptal i programmerings- och script-språk. För tillfället finns det ingen slumptals-funktion i JavaScript, men jag tror att det kommer att implementeras en snart. Tills vidare får man använda ett trick. Okej, det är väl kanske inget trick egentligen. De flesta kompilatorer jag kan komma på använder det för att räkna fram slumptal. Ja, den räknar fram dem. Man tar datorns tid och datum och manipulerar det på något sätt. Jag tror att den slutliga versionen av JavaScript kommer att använda den här metoden (eller en liknande). Tiden är, som jag nämnde ovan, egentligen bara ett stort tal. Man kan använda det talet och göra lite beräkningar med det. Man kan t ex beräkna sinus av det och använda absolutvärdet av det. Det ger ett tal mellan 0 och 1. Eftersom tiden ändras varje millisekund är det ingen risk att man får samma tal två gånger i rad (om man gör beräkningen många gånger direkt efter varandra). Om man vill generera många slumptal under en kortare tid bör man inte använda enbart sin(). Då får man ju värden från en sinuskurva! Det är inte slumpmässigt. Om man däremot vill generera ett nytt slumptal t ex var 20:e sekund är det här ett utmärkt sätt att göra det.

Det här är ett slumptal:

Här är koden: 

<html>
<head>
<script language="JavaScript">
function RandomNumber() {
  today = new Date();
  num= Math.abs(Math.sin(today.getTime()));
  return num;  
}
</script>
</head>
<body>
<script language="JavaScript">
<!--
  document.write("This is a random number:", RandomNumber());
// -->
</script>
</body>
</html>

Exemplet passar naturligtvis inte för alla syften, men det ger dig en uppfattning om hur det fungerar. Nu ska jag visa en funktion som jag fick från Maynard Demmon. Du behöver bara skriva värdet för variabeln limits för att ange det högsta värde du vill ha, t ex 100. Då får du ett 'bra' slumptal mellan 0 och 99. Här är koden:

  function random() {
     today = new Date();
     num = today.getTime();
     num = Math.round(Math.abs(Math.sin (num)*1000000)) % limits;
     return num;
  }

Att skapa fönster

Att skapa fönster är en jättebra finess i JavaScript. Man kan bygga nya fönster. Läsa in ett HTML-dokument. Navigera på Internet. Allt i JavaScript. Jag ska visa hur vi kan öppna ett nytt fönster och skriva något i det. Om du klickar på knappen får du se vad jag ska visa härnäst.

För att bryta med traditionerna skrev jag inte Hello world! i fönstret...
Här är koden: 

<html>
<head>
<script language="JavaScript">
function WinOpen() {
   msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no");
   msg.document.write("<HEAD><TITLE>Yo!</TITLE></HEAD>");
   msg.document.write("<CENTER><h1><B>This is really cool!</B></h1></CENTER>
");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Push me" onclick="WinOpen()">
</form>
</body>
</html>
Som alltid finns det en knapp som anropar en funktion. Funktionen WinOpen() skapar ett nytt fönster genom att anropa metoden open. De första citationstecknen innehåller URL:en till sidan. Här kan du skriva adressen till ett HTML-dokument som du vill läsa. Om du lämnar blankt läses ingen sida utan du kan skriva till fönstret direkt i JavaScript! Här kan du skriva nästan vad som helst. Det spelar ingen roll i vårt exempel. Du får ett felmeddelande om du skriver Display Window (med ett mellanrum mellan orden. Netscape påstår någonting annat, men jag satt en halvtimme därför att jag inte lyckades få något felmeddelande!). De två följande citationstecknen innehåller fönstrets egenskaper. Det här är mycket intressant. Du kan tala om ifall du vill ha ett verktygsfält, rullningslister... Om du skriver toolbar=yes kommer du att få ett verktygsfält i fönstret. Här nedan finns en lista över de egenskaper man kan ändra. Du kan ändra alla egenskaper. Du måste skriva dem som ovan. Utan mellanslag! Detta är vad du kan ändra i ditt fönster:

toolbar
location
directories
status
menubar
scrollbars
resizable
copyhistory
width=pixels
height=pixels

I stället för pixels måste du ange ett antal pixels. På det sättet talar man om för läsaren hur stort fönstret ska vara.
När du har öppnat fönstret, och döpt det till msg (står före metoden open), kan du skriva i det. Här kan du skriva vanlig HTML-kod! Detta är verkligen bra. Man kan bygga ett HTML-dokument och använda den information besökaren gav dig i ett formulär. Du kan skapa en sida där en besökare får fylla i sitt namn i ett formulär och sedan skapa ett nytt HTML-dokument där du använder hans namn! För några månader sedan var detta bara möjligt med hjälp av CGI-script!

Tänk på följande: När du skriver något till ett fönster bör du alltid sätta <br> efter den sista texten du skriver till fönstret. Annars kommer du troligen inte att se sista textraden. Det blir så därför att internet-läsaren bara skriver ut hela rader och om det inte finns ett radslut väntar dem på att det ska komma mera.
En annan viktig sak är detta: Om du vill visa bilder i ett nytt fönster så se till att sätta height och width i <img>-koden.Annars kommer du inte att se några bilder eller också kraschar sidorna. Det kan skapa en del väldigt konstiga problem som man inte väntar sig att bilden ska vara 'skyldig' till. Skriv alltså någonting i stil med:

<img src="mycool.gif" height=100 width=100>



Index - Del 1 - Del 3 - Del 4 - Del 5 - Del 6 - Del 7


Senast ändrad 11 maj 1996
© 1996 Stefan Koch

Översatt till svenska av Niklas Johansson 1996