 |
Scripts i Html-dokument |
2. Scripts inuti element
3. SCRIPT-elementet
4. Lite om händelsehanterare
5. NOSCRIPT
6. //- och /*-funktionen
1. Inledning
Den här sidan berättar om hur man lägger in ett script i ett Html-dokument. Texten utgår alltså ifrån Html och ger några ytterst enkla exempel på hur scripten fungerar.
På mina sidor om JavaScript kan du läsa mer om hur man skriver scripts. Gå dit >
2. Scripts inuti element
Scripts går att lägga in på i princip två olika sätt i Html-dokumentet, antingen inuti ett element eller mellan SCRIPT-elementen i HEAD. Här skall vi nu titta på det första sättet.
Det som är utmärkande för sådana scripts är att de är händelsestyrda. Det betyder att många av de funktioner som finns talar om vad som skall hända när besökaren gör något, som att röra muspekaren över en bild eller klicka på en länk. Ett enkelt exempel är följande:
Scriptet är mycket enkelt och ser ut så här:
<form name="form1"
method="post" action="">
<input type="button"
name="Klicka" value="Klicka
här!" onClick="window.alert
('Hej!')">
</form>
OnClick är själva stommen i scriptet och kallas för händelsehanterare. Lägg märke till hur citationstecknen (dubbla och enkla) skrivs..
Tips
Om du inte ser någon
text kan det bero på att du
inte har aktiverat JavaScripts: leta
bland menyerna i din webbläsare
tills du hittar "enable JavaScript".
Det kan också bero på
att du har en webbläsare som
inte förstår scripts. Det
finns också webbläsare
som inte förstår vilken
händelsen är, om den skrivs
med stora bokstäver, som i OnClick.
Därför skriver man ibland
dessa kommandon med små bokstäver
i stället.
3. SCRIPT-elementet
Det andra sättet att lägga in scripts på är i elementet som heter SCRIPT. (Man kan också hämta scriptet från en extern fil, men det är överkurs ännu så länge.) Sådana scripts placeras i HEAD, men går också att lägga var man vill i dokumentet.
Så här ser det ut i koden:
<HTML>
<HEAD>
<SCRIPT language="JavaScript"
type="JavaScript" >
<!-- Döljer koden för
äldre webbläsare
document.write("Du har webbläsare
" + navigator.appVersion)
document.write("av <b>"
+ navigator.appName + "</b>.")
// Slut på scriptet -->
</SCRIPT>
SCRIPT-elementet kan sedan ha följande attribut:
charset
talar om vilken teckenuppsättning
man använder i scriptspråket.
defer
talar om för webbläsaren
att scriptet inte kommer att visas
på skärmen, vilket enligt
uppgift skall göra så att
sidan laddas snabbare, eftersom den
kan vänta med att läsa scriptet
tills texter och bilder har laddats.
language
är ett äldre attribut
som delvis ersatts av "type".
Vad jag vet kan man för säkerhets
skull använda båda.
src
används för externa
scripts.
type
skrivs så här: type="text/JavaScript".
Här är ett exempel på hur man kan skriva dessa attribut:
<SCRIPT language="JavaScript" type="text/JavaScript" charset="ISO-8859-1" src="script.js>
4. Lite om händelsehanterare
Som jag skrev tidigare är scripten händelsestyrda, vilket betyder att man kan bestämma att någonting skall hända när besökare rör muspekaren eller klickar på en bild, etc.
Följande händelsehanterare kan användas i alla scriptspråk som stöder den standarden. De kan också användas oberoende av SCRIPT-elementet, som jag visade i avsnitt 2:
- onload
när en ny sida laddas i en frame. Får användas i A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA.
onunload
när besökaren hamnar på
en sida som inte kan laddas, t.ex
eftersom den blivit borttagen. Skrivs
inne i BODY.
onclick
när besökaren klickar på
något, t.ex en länk eller
en bild. Får användas i
samtliga element utom APPLET, BASE,
BASEFONT, BDO, BR, FONT, FRAME, FRAMESET,
HEAD, HTML, IFRAME, ISINDEX, META,
PARAM, SCRIPT, STYLE, TITLE.
ondblclick
som ovan fast vid dubbelklick. Får
användas i samtliga element utom
APPLET, BASE, BASEFONT, BDO, BR, FONT,
FRAME, FRAMESET, HEAD, HTML, IFRAME,
ISINDEX, META, PARAM, SCRIPT, STYLE,
TITLE.
onmousedown
när besökaren klickar och
ännu inte släppt upp knappen.
Får användas i samtliga
element utom APPLET, BASE, BASEFONT,
BDO, BR, FONT, FRAME, FRAMESET, HEAD,
HTML, IFRAME, ISINDEX, META, PARAM,
SCRIPT, STYLE, TITLE.
onmouseup
när besökaren släpper
knappen. Får användas i
samtliga element utom APPLET, BASE,
BASEFONT, BDO, BR, FONT, FRAME, FRAMESET,
HEAD, HTML, IFRAME, ISINDEX, META,
PARAM, SCRIPT, STYLE, TITLE.
onmouseover
när muspekaren förs till
(och snuddar) ett objekt, t.ex en
bild. Får användas i samtliga
element utom APPLET, BASE, BASEFONT,
BDO, BR, FONT, FRAME, FRAMESET, HEAD,
HTML, IFRAME, ISINDEX, META, PARAM,
SCRIPT, STYLE, TITLE.
onmousemove
när muspekaren förs över
objektet. Får användas
i samtliga element utom APPLET, BASE,
BASEFONT, BDO, BR, FONT, FRAME, FRAMESET,
HEAD, HTML, IFRAME, ISINDEX, META,
PARAM, SCRIPT, STYLE, TITLE.
onmouseout
när muspekaren lämnar objektet.
Får användas i samtliga
element utom APPLET, BASE, BASEFONT,
BDO, BR, FONT, FRAME, FRAMESET, HEAD,
HTML, IFRAME, ISINDEX, META, PARAM,
SCRIPT, STYLE, TITLE.
onfocus
används i formulär, t.ex
när besökaren kryssar i
en ruta. Får användas i
A, AREA, BUTTON, INPUT, LABEL, SELECT,
TEXTAREA.
onblur
används i formulär, t.ex
när besökaren lämnar
en ruta tom. Får användas
i A, AREA, BUTTON, INPUT, LABEL, SELECT,
TEXTAREA.
onkeypress
när en tangent trycks och sedan
släpps. Får användas
i samtliga element utom APPLET, BASE,
BASEFONT, BDO, BR, FONT, FRAME, FRAMESET,
HEAD, HTML, IFRAME, ISINDEX, META,
PARAM, SCRIPT, STYLE, TITLE.
onkeydown
när en tangent trycks ner. Får
användas i samtliga element utom
APPLET, BASE, BASEFONT, BDO, BR, FONT,
FRAME, FRAMESET, HEAD, HTML, IFRAME,
ISINDEX, META, PARAM, SCRIPT, STYLE,
TITLE.
onkeyup
när en tangent släpps upp.
Får användas i samtliga
element utom APPLET, BASE, BASEFONT,
BDO, BR, FONT, FRAME, FRAMESET, HEAD,
HTML, IFRAME, ISINDEX, META, PARAM,
SCRIPT, STYLE, TITLE.
onsubmit
när ett formulär skickas.
Får bara användas i FORM-elementet.
onreset
när ett formulär raderas.
Får bara användas i FORM-elementet.
onselect
när besökaren fyller i en
textruta. Får användas
i INPUT och TEXTAREA.
onchange
när ett redan ifyllt värde
ändras. Får användas
i INPUT, SELECT, TEXTAREA.
Närmare beskrivningar och exempel på hur dessa fungerar hittar du i min JavaScriptskola. Läs mer >
5. NOSCRIPT
För att underlätta för alla webbläsare som inte förstår SCRIPT-elementet, har man i HTML 4.0-standarden infört ett nytt element: <NOSCRIPT>.
Äldre versioner av webbläsare förstår självklart inte detta element, eftersom det ingår i den nya standarden. Elementet är därför främst till för alla som använder moderna webbläsare som inte vill eller kan köra scriptet.
Anledningarna kan vara många, t.ex att besökaren har stängt av JavaScriptfunktionen manuellt i webbläsaren eller att den som gjort sidan har använt ett scriptspråk som besökarens webbläsare inte kan förstå.
Här är ett exempel på hur man använder <NOSCRIPT>-funktionen:
<SCRIPT type="text/VBscript">
... scriptet ...
</SCRIPT>
<NOSCRIPT>
Om du kan läsa den här texten
på min hemsida, betyder det
att din webbläsare inte klarar
att tolka VBscript.
</NOSCRIPT>
6. //- och /*-funktionen
Precis som när det gäller stylesheets måste man gömma koden i SCRIPT-elementet, så att webbläsaren inte visar den av misstag.
Man använder då <!-- och --> som vanligt, men med ett litet tillägg: // (dubbelslash).
Dubbelslash-tecknet används för att skriva små kommentarer till själva scriptkoden och när det skrivs i SCRIPT-elementet hoppar webbläsaren över det som står på den raden.
Man skriver t.ex:
<SCRIPT language="JavaScript">
<!--
//Dölj koden så att den inte visas på skärmen av misstag
... första delen av scriptet ...
// Kommentar till koden
... resten av scriptet ...
// Kommentar till koden. Här är scriptet slut.
// -->
</SCRIPT>
Dubbelslashen måste skrivas före --> för att webbläsaren inte skall tolka det som en del av koden!
Om man har en längre kommentar kan man i stället dölja den genom att använda snedstreck och stjärna:
<SCRIPT language="JavaScript">
<!--
/*
Här kommer en kommentar som är
jättelång. Det kan t.ex
vara uppgifter om vem som gjort scriptet
och var man kan nå denne för
fler scripts eller för uppgifter
om copyright och liknande.
*/
... scriptet ...
// slut på scriptet -->
</SCRIPT>