Etapp 1

Spelet är tänkt att kunna användas läsåren 4-9 som ett inslag i svenskundervisningen och som underlag för diskussion både innehållsmässigt och språkligt.

Den här kursen är upplagd på samma sätt, men visar i stället hur man med en godtycklig bläddrare (browser) som kan hantera ramar och JavaScript eller JScript , kan skapa versionen Ordspråksleken2 för både Explorer och Netscape version 3 eller senare..

Med HTML skapar man olika slags knappar, textrutor och listrutor, som sedan styrs av JavaScript, Jscript eller VBScript. Resultatet måste visas i en bläddrare, programmen kan inte göras självgående.

De flesta begrepp som används i JavaScript och Jscript är desamma, men i båda språken finns begrepp, som bara fungerar i det ena språket.
För att göra den här kursen så allmängiltig som möjligt har jag endast använt de enklaste begrepp, som är lika för båda språken. men de är ändå fullt tillräckliga, för att man ska kunna skapa liknande program efter egna idéer, och använda dem som stimulans i undervisningen eller bara för nöjes skull. Är du lärare kanske du har några intresserade elever, som skulle kunna följa kursen som ett projektarbete.

För att skriva koden behöver man ett program som kan skriva ren text.
Själv har jag använt ett litet trevligt gratisprogram som heter HomeSite 1.2.
Det fungerar både för JavaScript och VBScript och underlättar kodskrivandet. Man skriver text, markerar den och dubbelklickar på det taggpar man vill ha, så sätts de dit av programmet. Allt styrs via menyer och knappar, men man måste själv veta vad man vill göra, det är inget trolleriprogram.
Homesite3 är betydligt bättre men det är inte gratis. Du hittar det på samma adress.

Homesite är på engelska men gillar du inte det hittar du här ett liknande helsvenskt program som heter Einstein. Där kan du också ladda ner en demoversion. Vill du behålla programmet kostar det 250 kr.

Vill du lära dig mer än vad som tas upp i den här kursen hittar du här en engelsk nybörjarkurs i JavaScript.
Via den här länken hittar du ett engelskt referensmateriel till Jscript, där alla begrepp finns med. Materialet består av flera olika delar och du får du välja det du vill ha från en lista. Där finns också några exempel, som i varje fall jag hade stor nytta av att studera.

Vill du följa kursen i den ordning den är skriven, kan du trycka på pilen som finns allra sist i varje avsnitt. Du kan gå tillbaka till föregående avsnitt med returpilen som alltid finns allra överst.

Vill du hoppa mellan avsnitten finns en Meny i form av en listruta överst på skärmen.
Där kan du se innehållet i de olika etapperna och välja den etapp du vill arbeta med.
I Netscape kan du behöva dra i rullningslisten för att se listrutan.

Programmet Ordspråksleken2 kan du själv skapa med hjälp av instruktionerna i kursen, eller testa online.

...

1. Den översta raden innehåller den första ramen, som är endast 30 pixel hög. Den har fått namnet "rubrik"

2. Den andra raden, 160 pixel hög, är delad i två olika breda ramar. Den högra, tredje ramen, "bild" är 180 pixel bred, den vänstra, andra ramen, "ord", tar resten av skärmbredden.

3. Den tredje och sista raden innehåller den fjärde ramen, "text", som upptar resten av skärmen.
   

   Här är koden för ramstrukturen till Ordspråksleken2:

   
   <FRAMESET COLS="100%" ROWS="30,160,*">
    <FRAME NAME="rubrik" SRC="rubrik.htm" SCROLLING="NO" 
       MARGINWIDTH=10 NORESIZE BORDER=1 FRAMEBORDER=1>
    <FRAMESET COLS="*,180">
     <FRAME NAME="ord" SRC="tom.htm" SCROLLING="AUTO" 
         MARGINHEIGHT=10  MARGINWIDTH=10 NORESIZE 
         BORDER=1 FRAMEBORDER=1>
     <FRAME NAME="bild" SRC="tant.htm" SCROLLING="NO" 
         MARGINHEIGHT=0  MARGINWIDTH=0 LEFTMARGIN=0 
         TOPMARGIN=0  NORESIZE BORDER=1 FRAMEBORDER=1>
    </FRAMESET>
    <FRAME NAME="text" SRC="jtext3.htm" SCROLLING="AUTO" 
         NORESIZE  BORDER=1 FRAMEBORDER=1>
   </FRAMESET>
   

• Marginalsättningen i ramen "bild" gör att bildens vänstra övre hörn kommer att placeras i ramens vänstra övre hörn. Det blir då ca 20 pixels avstånd till skärmens högra kant och bilden riskerar inte att bli beskuren.

• NORESIZE gör att det inte går att ändra storlek på ramarna.

• Ingen rullning i ramarna "rubrik" och "bild". SCROLLING="NO".
  I ramarna "ord" och "text" markerar SCROLLING="AUTO" att rullningslister ska visas vid behov.

• BORDER=1 och FRAMEBORDER=1 har satts till för att det ska passa både till Netscape (BORDER) och Internet Explorer (FRAMEBORDER). När allt är klart kommer jag att ta bort ramarna. Jag har dem tills vidare för tydlighets skull.

...

Här är HTML-koden:

<HTML>
<HEAD>
<TITLE>Rubrik</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" 
    VLINK="#0000FF" ALINK="#0000FF">
<TABLE  WIDTH="100%" BORDER=0 TOPMARGIN=0>
<TR>
<TD HEIGHT=10 WIDTH=35%><A HREF="../jskurs/jskurs.htm" TARGET="_top">
<font size="-1">Till kursen</font>
</TD>
<TD HEIGHT=10 WIDTH=30%><CENTER>
<H4>Gissa mitt ordspråk</H4></TD>
<TD HEIGHT=10 WIDTH=35%></TD>
</TR>
</BODY>
</HTML>

HTML-koden är den minsta möjliga:

<HTML>
<BODY BGCOLOR="WHITE" >
</BODY>
</HTML>

Kommentar till koden:
I stället för färgkoden "#FFFFFF" kan man skriva färgnamnet "White"

Här är HTML-koden:

<HTML>
<BODY BGCOLOR="WHITE">
<IMG SRC="b0.gif" WIDTH=160 HEIGHT=160 BORDER=0 >
</BODY>
</HTML>

Kommentar till koden:
Här har tillkommit en bildhänvisning. Storleken har satts för att passa exakt i ramen.

1. 
   <HTML>
   <HEAD>
   <TITLE>Dokumentet för ramen Text i Javascript</TITLE>
   </HEAD>
   <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" 
      VLINK="#800080" ALINK="#FF0000">
   <CENTER>
   <TABLE WIDTH="100%" BORDER=0  VSPACE=20  CELLPADDING=10>
   <FORM NAME="spel">
   <TR><TD HEIGTH=60 ALIGN="MIDDLE">
   <INPUT TYPE="BUTTON"  VALUE=" LJUD " >  
   </TD>
   

   Kommentar till koden:
   I tabellen läggs ett formulär som får namnet "spel".
   I tabellens första rad och första kolumn läggs en HTML-knapp på vilken det står "LJUD". Något namn på knappen behövs inte.
   Senare ska vi sätta in en JavaScript-kod för att styra knappen.

2. Koden för den mitttersta cellen i tabellen:

   
   <TD  HEIGHT=60 >
   <CENTER>	
   <INPUT TYPE="BUTTON"  VALUE=" A " >
   .
   .
   .
   
   <INPUT TYPE="BUTTON"  VALUE=" Ö " >
   	. . . 
   </CENTER>
   </TD>
   

   Kommentar:
   I den mittersta cellen läggs 29 knappar som ska fungera som bokstavstangenter. Här visas bara den första och den sista raden De 27 mellanliggande raderna rader till för bokstäverna B - Ä. konstrueras på liknande sätt.
   Senare ska styrkoden i JavaScript sättas till.

   Så här ser tangenterna ut i Netscape och Explorer 4.

   

   I tidigare versioner blir knapparna betydligt större.

   
3. Koden för den sista cellen och avslutning av tabellen:
   

   
   <TD HEIGTH=60>
   <INPUT TYPE="BUTTON"  VALUE=" NYTT ">
   </TD>
   </TR>
   </FORM>
   </TABLE>
   </CENTER>
   

   Kommentar:
   På samma sätt som för ljudknappen i kolumn1 läggs här en knapp som ska starta nytt spel. Senare ska JavaScriptkod sättas till.
   Cellen, raden, formuläret, tabellen och tabellcentreringen avslutas.

Den sista tabellen i dokumentet Ytterligare en tabell läggs till i dokumentet. Även den tabellen har tre kolumner men med annan bredd.

1. Här är koden för tabellstarten och den första cellen :
   

   
   <TABLE CELLPADDING=10 CELLSPACING=0  WIDTH="100%" 
   	BORDER=0 TOPMARGIN=0>
   <TR>
   <TD WIDTH=35%>
   <FORM  NAME="svgrad">
   <FONT SIZE=2>Svårighetsgrad:......
    <SELECT NAME="svval" >
    <OPTION >Lätt
    <OPTION SELECTED>Normal
    <OPTION >Svår
    </SELECT><BR>
     Startpoäng :<INPUT TYPE="text" 
       NAME="startp" SIZE=4 VALUE=50>      
     Fel vokal avdrag <INPUT TYPE="text" 
       NAME="vokp" SIZE=3 VALUE=30>p.<BR>           
     Fel konsonant avdrag <INPUT TYPE="text" 
       NAME="konsp" SIZE=3 VALUE=15> p.<BR>
     Rätt gissning +5p.<BR> 
     Spelet avslutas om du får minuspoäng. 
   </FORM>
   </TD>
   

...