hur definierar och anropar man funktioner
vilka eventhandlers finns det
hur skriver man kommentarer
spelar det någon roll om man använder stora eller små bokstäver
hur kollar man vilken webbläsare som används
| VAR ska JavaScript-koden placeras? | |
|
mellan SCRIPT-taggar i HTML-kodens HEAD-del |
här placeras t ex
|
| mellan SCRIPT-taggar i HTML-kodens BODY-del |
här placeras t ex
|
| efter "event handlers" som t ex ONMOUSEOVER ONMOUSEOUT ONCLICK |
här placeras t ex
|
| i en egen textfil <SCRIPT SRC= "minkod.js"> </SCRIPT> |
här placeras t ex
|
Så här kan en SCRIPT-tagg se ut:
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
// här ska koden placeras
</SCRIPT>
Så här kan en HTML-sida med SCRIPT-taggar se ut:
<HTML>
<HEAD>
<SCRIPT LANGUAGE = "JavaScript"
TYPE="text/javascript">
<!--1
JavaScript här...2
//-->1
</SCRIPT>
</HEAD>
<BODY>
<A HREF ="URL"
EVENTHANDLER = "JavaScript kod">3...</A>
<SCRIPT>
<!--1
document.write("det som skrivs här kommer att synas på hemsidan")4
//-->1
</SCRIPT>
</BODY>
</HTML>
Här följer förklaringar till siffrorna i HTML-exemplet ovan:
1 placera koden mellan HTML-kommentartecken, dvs mellan <!-- och -->
// är kommentarmarkeringen i JavaScript
| Kommentartecken | |
| HTML | <!-- kommentartext --> |
| JavaScript | // kommentartext |
2 funktioner definieras lämpligen i HEAD-delen
Mer om funktioner längre ner på den här sidan!
3 man kan använda olika event handlers, t ex onClick, onMouseOver - man kan till exempel låta en klickning på en länk anropa en funktion som startar en animation
4 ett exempel som skriver texten inom citationstecken direkt på HTML-sidan (texten ska stå på en rad); man kan till exempel automatiskt visa dagens datum på sidan.
JavaScript placeras alltså antingen mellan SCRIPT-taggar och kommentartecken eller efter event handlers. Man kan också t ex anropa en funktion så här
<A HREF="javascript:iljfunktion()">länk</A>
DEFINIERA OCH ANROPA EN FUNKTION
En funktion är en bit kod som utförs endast om och när man genom att anropa funktionen talar om att koden ska utföras. En sida kan vara full av funktioner - anropas de aldrig händer ingenting.
Så här ser "skalet" till en enkel funktion ut:
function ettnamn()
{
}
Mellan de två krullparenteserna skriver man in kod som talar om vad som ska hända när funktionen anropas.
ettnamn kan bytas ut mot ett namn vilket som helst.
Om man vill skapa en funktion som varje gång den anropas bl a visar ett meddelande kan man t ex skriva så här:
function visameddelande()
{
alert('Hej!')
// gör ngt mer
}
Sedan kan man placera ett anrop - visameddelande() - någonstans enligt principerna ovan t ex
<A HREF="URL"
onMouseOver="visameddelande()">för muspekaren över den här länken för att visa ett meddelande</A>
eller
<A HREF="URL"
onClick="visameddelande()">klicka på den här länken för att visa ett meddelande</A>
Man kan också skriva så här för att anropa en funktion som fått namnet visameddelande() :
<A HREF="javascript:visameddelande()">klicka här för meddelande</A>
EVENTHANDLERS OCH ANNAT ANVÄNDBART:
onMouseOver
- en mouseover äger rum t ex när muspekaren hamnar över en länkbild
onMouseOut
- en mouseout äger rum t ex när muspekaren lämnar en länkbild
onClick
- t ex när man klickar på en länkbild
onBlur
- t ex när cursorn lämnar en textruta, onBlur är motsatsen till onFocus
onFocus
- t ex när cursorn hamnar i en textruta, onFocus är motsatsen till onBlur
onAbort
- när man avbryter inläsningen av en bild, t ex genom att klicka på en ny länk
onSubmit
- när en FORM skickas iväg
onUnload
- motsatsen till onLoad
onLoad
- när en sida laddats klart
EVENTHANDLERS SOM FUNGERAR I NYARE WEBBLÄSARE
(fr o m version 4)
onDblClick
onDragDrop
onKeyDown
onKeyPress
onKeyUp
onMouseDown
onMouseMove
onMouseUp
onMove
onResize
<NOSCRIPT> mellan de här taggarna kan man placera kod för de webbläsare som inte klarar av JavaScript</NOSCRIPT>
Kommentarer skriver man så här
//kommentar - en rad
/* kommentar - flera rader
kommentar - flera rader*/
Stora eller små bokstäver spelar roll - att anropa funktionen test1() kommer inte att leda till någonting om funktionen man definierat heter Test1().
KOD SOM KOLLAR VILKEN WEBBLÄSARE SOM ANVÄNDS
Kod som fungerar i webbläsare som följer w3-standarden (t ex Mozilla 1.6) kan placeras i en if-sats som ser ut så här:
if(document.getElementById)
{
....
}
Kom som fungerar endast i Microsofts webbläsare (fr o m version 4) kan placeras i en if-sats som ser ut så här:
if(document.all)
{
....
}
Kod som fungerar endast i Netscape 4.x kan placeras i en if-sats som ser ut så här
if(document.layers)
{
....
}
Kod som kollar om det är OK att byta bilder kan placeras i en if-sats som ser ut så här
if(document.images)
{
....
}
Den här koden kollar om den webbläsare som används är Netscape Navigator i version 3 eller senare (i så fall sätts webbl till 1) eller om det är Microsofts Internet Explorer i version 4 eller senare som används (i så fall sätts webbl till 2). Placera koden i HEAD-delen. Se för säkerhets skull till så att det inte förekommer radbrytning någon annanstans än efter röda snedstreck - det ska t ex inte finnas någon radbrytning mellan "Internet" och "Explorer".
webbl=0 //
if((navigator.appName == "Netscape")&&(parseInt(navigator.appVersion) >= 3))//
{//
webbl = 1 //
}//
if((navigator.appName == "Microsoft Internet Explorer")&&(parseInt(navigator.appVersion) >= 4))//
{//
webbl = 2//
}//
Lägg sedan till en if-sats - t ex if(webbl == 1) - vid övrig kod som fungerar/ ska fungera bara i en av de här webbläsarna. Till exempel vid kod som öppnar olika sidor beroende på vilken webbläsare som används. Så här:
if(webbl == 1)
{
window.location="netscapesida.html"
//öppna sida gjord för Netscapes webbläsare
}
if(webbl == 2)
{
window.location="miesida.html"
//öppna sida gjord för Microsofts webbläsare
}
Ett sätt att kolla om det är ok att byta bilder är att använda document.images. T ex så här
function iljswtch2(nummer)
{
if(document.images)
{
document.switch16.src = bild[nummer].src
}
}
För att kolla om det är OK att använda LAYERS (Netscape 4.x) kan man använda document.layers. T ex så här
function iljswtch2(nummer)
{
if(document.layers)
{
....
}
}
Sidan gjordes av
ilj@flowsim.se
Senast ändrad 15 maj 1998.
Den här sidan hör hemma i ett ramsystem hos
www.flowsim.se
JAVASCRiPT