JavaScript – del2A
Syftet med detta häfte är att sammanfatta det viktigaste i JavaScript så kort och koncist som möjligt
men ändå tillräckligt omfattande för att ge god kännedom om en av de vanligaste teknikerna för att
skapa mer avancerade webbsidor. Kursdeltagarna ska med detta häfte som stöd kunna göra
avancerade webbsidor, förstå den bakomliggande tekniken samt ha god kännedom om prestandaoch säkerhetsaspekter.
Innehåll (JavaScript):
• JS – del1 : Introduktion, historik, bakgrund, egenskaper, objekt, variabler, villkor och loopar.
Operatorer, jämförelser och logiska operatorer. Alert- och Promptfunktionerna.
• JS – del2 : Formulär. Funktioner och returvärden. Händelsehantering. Infogning av JS-kod.
• JS – del3 : Mer om Objekt. DOM.
• JS – del4 : Stränghantering
• JS – del5 : Cookies
Olika sätt att infoga JavaScript i HTML-koden
• JavaScript kan infogas i en HTML sida på olika sätt.
1) I taggen <SCRIPT> i HTML-sidans huvud. använt i exempel tidigare.
2) Som en extern fil länkad till HTML-sidan.
Ex. <SCRIPT SRC="filnamn.js"></SCRIPT> istället för filnamn går det också bra med t.ex en URL
eller en relativ sökväg. Fördelen blir då att man kan länka den externa filen till flera sidor och
därmed förenkla översikten och uppdaterings möjligheten.
3) I en händelsehanterare som placeras i taggar i HTML-sidan.
Ex: onClick="alert(’Instruktionen du utförde var fel');" (för fullständigt exempel se anteckningar).
4) I en länk Ex: <A HREF="javascript:alert('Du klickade på en länk');">Klicka här</A>
Funktioner
• Används för att göra saker smidigare t.ex om en sak ska göras flera gånger.
• Kan anropas oändligt många gånger.
• Det finns fördefinierade och egna funktioner.
Exempel på fördefinierade funktioner
• I JavaScript finns det mängder av trevliga inbyggda funktioner inskrivna från början i själva språket.
• Exempel på dessa är typkonverteringsfunktionerna:
parseInt() och parseFloat() som omvandlar en sträng till en integer (heltal) respektive en sträng till ett
flyttal.
• eval() är en funktion som utvärderar en sträng som ett JavaScript uttryck eller som ett värde och som
antingen utför det eller returnerar värdet.
Exempel.
Om man deklarerar:
heltal = "10";
decimaltal = "6.77";
hexadecimaltal = "1A";
så ger parseFloat(decimaltal) värdet: 6.77
parseFloat(hexadecimaltal) värdet: NaN (Not a Number)
parseInt(decimaltal) ger värdet: 6
eval(10) ger värdet: 10
Exempel på egna funktioner
• Om ni t.ex behöver returnera värden från funktioner.
<HTML>
<HEAD><TITLE>Returnera ett värde från en funktion</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- deklarera funktionerna i huvudet så de är tillgängliga i kroppen
function kub(tal) {
return (tal * tal * tal);
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
svar=kub(10);
document.write(svar);
</SCRIPT>
</BODY>
</HTML>
I funktionshuvudet (function kub(tal)) betyder 'tal' att funktionen ska ta emot en inparameter.
Det returnerade värdet läggs i en variabel som sedan skrivs ut.
Det viktiga är att nyckelordet return finns med när funktionen ska returnera ett värde.
Värdet 10 sänds till funktionen som inparameter, värdet som räknats ut i funktionen returneras via
funktionsnamnet och tilldelas variabeln svar. svar-variabeln skrivs sedan ut med write-metoden i
objektet document.
Det andra sättet att göra samma sak på är genom att skriva funktionen inom SCRIPT-taggarna på
sidan.
Standard är dock att man brukar skriva funktioner i huvudet av hemsidan eller i en separat
fil(mer om det senare), för att få en bra översikt.
Egna och fördefinierade funktioner
<html>
<head>
<title>Funktioner</title>
<script language="JavaScript">
function Halsning(namn) {
alert("Hej," + namn);
}
</script>
</head>
<body>
<h1>Egen funktion som använder inbyggda funktioner</h1>
<p>Denna funktion hälsar på två individer</p>
<script LANGUAGE="JavaScript">
Halsning("Kalle");
Halsning("Musse");
</script>
</body>
</html>
Funktionen ovan använder den inbyggda funktionen alert för att skicka ett meddelande till användaren
via ett s.k alert-fönster som kommer upp.
Textsträngen "Kalle" skickas till funktionen som tar emot den och anropar den inbyggda funktionen
Alert som skriver ut ett meddelande i en Alert-box hos användaren.
Samma sak görs igen men med Musse.
Notera att den andra processen inte startar (d.v.s det andra namnet ej visas) förrän användaren tryckt
på OK, detta p.g.a att JavaScript exekveringen stoppas när Alert-meddelanden visas.
Händelsehantering
Javascript är ett händelsestyrt språk, d.v.s att de olika händelserna som användaren orsakar styr hur
programmet arbetar.
Att hantera dessa händelser är därför viktigt.
• OnClick satt som ett attribut till en knapp eller t.ex en bild, när användaren klickar på objektet
aktiverar händelsen.
Ex:
<HTML>
<HEAD>
<TITLE>Enkel händelsehantering</TITLE>
</HEAD>
<BODY BGCOLOR="WHITE">
<IMG SRC="netscape.jpg" onClick="alert('Du klickade på bilden');">
</BODY>
</HTML>
Det finns flera olika metoder av enkel händelsehantering se anteckningar för fler, mer ingående
information om händelsehantering kommer senare i kursen.
onClick (som ovan) samt onMouseOver och onMouseOut är exempel på enkel händelsehantering.
En annan händelsehantering som kan vara användbar är onLoad (när sidan laddas) och onUnload
(när sidan stängs).
Exempel händelsehantering
<html>
<head><title>Händelse</title></head>
<body>
<form>
<input type=button value = "Tryck här!" onClick = "alert('Duktigt!');">
</form>
</body>
</html>
Alertboxen används normalt inte till det ovan utan till att ge meddelanden om fel och bör inte
missbrukas i sitt syfte.
Exempel händelsehantering
<FORM>
Ange ditt namn:<BR>
<INPUT TYPE="text" NAME="namn" WIDTH="52">
<INPUT TYPE="button" VALUE="Skicka" onClick="alert(namn.value);">
</FORM>
Notera att man måste använda punktnotation för att komma åt värdet av variabeln namn.
Fler händelser
• Varje objekt har en egen uppsättning händelser t ex
- knappar och länkar: onClick
- document: onLoad
• Anropa händelse-hanterare
onClick="sayYes();">
Här anropas funktionen sayYes() när vi klickar på knappen med texten "klicka här".
• Lista på händelser och var de kan användas:
onBlur
window (BODY), Text, Select, Textarea, Password (INPUT)
onChange
Text, Select, Textarea, FileUpload (INPUT)
onClick
Anchor (A), Button (INPUT)
onError
Image (IMG), window (måste skrivas)
onFocus
window (BODY), Text (INPUT)
onKeyDown document, Image, Link, Textarea
onKeyUp
document, Image, Link, Textarea
onLoad
Image (IMG), window (BODY, FRAMESET)
onMouseDown document, Link, Button
onMouseOut Area, Link
onMouseOver Link
onReset
Form
onSubmit
Form
onUnload
window
OBJEKT
I JavaScript finns det 3 olika typer av Objekt.
1. Webbläsarobjekt.
2. Inbyggda objekt (se JavaScript del3).
3. Egna objekt (tas ej upp inom kursens ram).
Objekten och händelsehanterarna är tillsammans det viktigaste i JavaScript.
DOM - Document Object Model
DOM (Document Object Model) är modellen efter vilken en webbläsare är uppbyggd. Alla
objekt/element i webbläsaren finns hierarkiskt ordnade i DOM.
De olika rutorna representerar JavaScripts olika fördefinierade objekt i webbläsaren.
Via dessa objekt kan olika information hämtas och olika funktioner nås:
window ger möjlighet till att skapa nya fönster och tillgång till funktioner i nuvarande fönster
navigator ger information om användares webbläsare och miljö
frames ger tillgång till olika ramar (om de finns)
document ger tillgång till HTML-elementen i webbläsaren
history ger information om tidigare besökta webbsidor
location ger information om nuvarande webbplats och möjlighet till att skicka användaren vidare till
annan plats
screen ger information om användarens bildskärmsegenskaper (upplösning, färgdjup etc.)
