Introduktion till JavaScript

Introduktion till JavaScript
Del 6

Jag får många mail som handlar om problemet att öppna två sidor med bara ett musklick. Det finns i princip tre olika lösningar på problemet. Den första är att skapa en knapp som anropar en funktion när användaren klickar på den. Funktionen öppnar de två sidorna i olika frame-fönster eller öppnar nya skärmfönster. Det är inte så svårt om du tittar på andra exempel i den här introduktionen. Vi har alla ingredienser vi behöver.

Vi skapar tre frame-fönster. Det första används till knappen. Den första HTML-sidan är bara till för att öppna fönstren och namnge dem. Detta är ingenting nytt eftersom vi använde tekniken i del 3 när vi jobbade med frames. Jag visar i alla fall. (Jag vet inte om det händer dig med, men alltid när en databokförfattare tror att något är så självklart att det inte behöver skrivas, brukar det vara just den biten jag tycker är svår. Vi fortsätter:)

frames2.htm

<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
    <FRAMESET COLS="295,*"> 
  <FRAMESET ROWS="100%,*"> 
    <FRAME SRC="loadtwo.htm" NAME="fr1"> 
      </FRAMESET> 
  <FRAMESET ROWS="75%,25%"> 
    <FRAME SRC="cell.htm" NAME="fr2"> 
    <FRAME SRC="cell.htm" NAME="fr3"> 
      </FRAMESET> 
</FRAMESET> 
</HTML>

loadtwo.htm öppnas i första fönstret. Detta är fönstret med knappen.

loadtwo.htm

<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
  function loadtwo(page2, page3) {
     parent.fr2.location.href=page2;
     parent.fr3.location.href=page3;
}
// -->
</script>
</HEAD>
<BODY>
<FORM NAME="buttons">
     <INPUT TYPE="button" VALUE="2 in a row" onClick="loadtwo('frtest1.htm','frtest2.htm')">
</FORM>
</BODY>
</HTML>

Funktionen loadtwo() anropas när man trycker på knappen. Två strängar vidarebefordras till funktionen. Om du tittar på funktionen loadtwo() ser du att det andra fönstret, fr2 öppnar sidan som definierads av första strängen i funktionsanropet. Om du har olika knappar som öppnar olika sidor kan du återanvända funktionen. Du behöver bara ge de olika sidornas URL:er (adresser).

Den andra tekniken använder hyperlänkar. En del exempel som cirkulerar på Internet ser ut ungefär så här:
<a href="yourlink.htm onCLick="yourfunction()">
Den här tekniken verkar inte fungera på alla plattformar, så det är bäst att du inte använder den. Jag vet inte om det är meningen att den ska fungera, men det behöver vi inte oroa oss för eftersom det finns en annan metod att genomföra detta. Vi kan anropa en JavaScript-funktion på följande sätt:

<a href="javascript:myfunction()">Min länk</a>

Det är enkelt och verkar fungera bra på alla läsare. Man skriver bara javascript: följt av namnet på funktionen. Om du anropar funktionen 'loadtwo()' i exemplet ovan kan du uppdatera två fönster med ett klick på en hyperlänk.

Den tredje tekniken att öppna två sidor med ett musklick kan kombineras, antingen med knappar, eller med hyperlänkar. Vi kan göra det med den andra tekniken här ovan, men det här sättet är ibland mer lämpligt. Det vi kan göra är att öppna ett HTML-dokument i ett fönster. Det gör vi med
<a href="getfr2.htm" target"fr2">Click here!</a>
Det vet vi redan. Nu lägger vi till egenskapen onLoad i den öppnade filen. Filen getfr2.htm kan se ut så här:

<HTML>
<BODY onLoad="parent.fr3.location.href='getfr3.htm'; return true;">
bla bla bla
</body>
</html>

Du måste förstås lägga till detta i varje dokument som kan öppnas i det andra fönstret.

Ett annat vanligt problem är hur nya sidor kan öppnas i ett nytt skärm-fönster. Fönstret ska öppnas när användaren klickar på en länk. Man behöver bara lägga till egenskapen target i <a href...>-koden igen. Så här:
<a href="goanywhere.html" target="Resource Window">Go!</a>

Nu ska vi titta på olika operatorer som du kan använda i JavaScript. Operatorer är en kraftfull teknik att förkorta och förbättra dina script. Om du t ex vill prova om en variabel x är större än 3 och mindre än 10 kanske du skriver så här:

if (x>3) 
  if (x<10)
    doanything();

Funktionen doanything()anropas om x>3 och x<10. Det finns faktiskt ett snabbare sätt att skriva detta:

if (x>3 && x<10) doanything();

&& kallas för AND-operator. Det finns också en OR-operator. Du kan använda den om du t ex vill kolla om en variable x är lika med 5 eller om en annan variabel y är lika med 17:

if (x==5 || y==17) doanything();

Funktionen doanything() anropas när x==5 eller y==17. Den anropas också om båda jämförelserna är sanna.
Jämförelser görs med operatorn == i JavaScript (Det finns förstås också <,>,<= and >=). Om du kan C/C++ så är det likadant. Ett ensamt = används för att lagra ett värde i en variabel. (Om du kan Pascal kan det verka lite förvirrande. Att ge en variabel ett värde görs med := och jämförelser med ett ensamt =)

Att se om en variabel inte är lika med ett visst tal kan bli komplicerat utan variabler. Det görs med !=. Det kan t ex se ut så här: x != 17.

Det finns massor av andra intressanta operatorer som kan göra dina program effektivare. Titta i Netscapes dokumentation så får du en komplett överblick av alla operatorer du kan använda i JavaScript.

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

Översatt till svenska av Niklas Johansson 1996