På denna sida behandlas grundläggande detaljer om JavaScript som en teknologi innan språkets uppbyggnad behandlas på kommande sidor. Bl.a. vad JavaScript är och varför man ska använda det, var koden skrivs samt hur man kan kommunicera med besökaren (vilket i.o.f.s. har med språket att göra :-).
Observera att kod i JavaScript är känsliga för "skiftläge", d.v.s. språket skiljer (liksom C#, C/C++ och Java) på gemener och versaler! JavaScript är alltså inte samma sak som Javascript eller javascript i kod.
JavaScript är (främst) en klientteknologi (eng. client-side), d.v.s. förekommer i klienter (t.ex. webbläsare) och JavaScript-kod exekverar alltså i klienter, vilket bl.a. gör det möjligt att skapa ett mer interaktivt och dynamiskt gränssnitt (utan att behöva ladda nya webbsidor från en webbserver hela tiden). Eftersom JavaScript är en klientteknologi (liksom (X)HTML och CSS) så är man alltså inte beroende av en webbserver (vilket är ett skäl till att denna webbplats, Björns studiewebb, kan laddas ner och ändå fungera).
JavaScript förekommer, eller har förekommit, i en del serverteknologier (bl.a. Cauchos Resin-server), därav "främst" i parentes ovan.
JavaScript är inte ett alternativ till serverteknologier (eng. server-side), så som ASP, Java eller PHP, som utför exekvering på en webbserver innan webbsidor skickas till besökares klient. JavaScript är alltså ett komplement till eventuella serverteknologier.
Till början på sida
JavaScript bör användas för att utöka upplevelsen av ett besök på en webbplats (inte styra vad som kan göras under besök). Hur detta kan göras beskrivs på (vad jag antar finns) tusentals webbplatser på Internet. I denna underwebb hoppas jag på att ge en introduktion till JavaScript så att du kan förstå innehållet på dessa tusentals webbplatser. :-) Nedan ges exempel på några saker som JavaScript kan användas till.
Till början på sida
JavaScript-kod kan skrivs (nästan) var som helst i ett (X)HTML-dokument, men exempel på var koden kan placeras ges nedan:
I de två första fallen måste koden skrivas inom (X)HTML-taggen SCRIPT för att tala om för webbläsare att det är just JavaScript-kod (och inte (X)HTML-kod). I SCRIPT-taggen används ett attribut TYPE (eller, det äldre, LANGUAGE) för att tala om vilket programspråk som skriptet innehåller.
I det tredje fallet används den grundläggande funktionen i grafiska gränssnitt (eng. graphical user interface, GUI): händelser (eng. events). En händelse är något som uppstår, t.ex. besökare klickar på en knapp och händelsen "onclick" uppstår. (Se mer på sidan Händelser.)
Det går även att placera JavaScript-kod i en extern fil och sen länka in den externa filen med attributet SRC i SCRIPT-taggen. Detta sätt är att föredra.
I SCRIPT-taggen används attributet TYPE för att tala om vad taggen innehåller, d.v.s. text i form av JavaScript-kod, t.ex. "text/javascript".
<html>
<head>
<title>Var kod skrivs</title>
<script>
//T.ex. funktioner och globala variabler
// som anropas från skript nedan
</script>
</head>
<body>
<!-- HTML-kod -->
<script>
//Kod för skript
</script>
<!-- Mer HTML-kod -->
</body>
</html>Attributet LANGUAGE i SCRIPT-taggen användes tidigare för att ange vilket språk som skriptet avsåg, i detta fall "JavaScript". Numera bör vi dock använda attributet TYPE istället (se ovan).
Beskrivningen av detta attribut finns med då det antagligen finns äldre exempel på Internet som använder just detta attribut.
<html>
<head>
<title>Var kod skrivs</title>
</head>
<html>
<body>
<!-- HTML-kod -->
<script>
//Kod för skript
</script>
<!-- Mer HTML-kod -->
</body>
</html>Ett typiskt exempel på händelser beskrevs ovan: en besökare klickar på en knapp och händelsen "onclick" (eller bara "click") uppstår. Exempel nedan visar hur man kan visa en dialogruta (alert) när besökare klickar på knapp. Testa själv genom att klicka på knappen nedanför. :-)
<form action="">
<p class="center"><input type="button"
value="Klicka mig!"
onclick="alert('Du klickade mig! :-)')" />
</p>
</form>JavaScript-kod kan, som sagt, placeras i en extern fil (oftast med filändelsen .js) som länkas in. Externa filer är praktiska för att samla funktioner i en eller flera filer som sen länkas in i alla webbsidor där funktionerna behövs. Den externa filen behöver endast innehålla JavaScript-kod, d.v.s. inga (X)HTML-taggar så som SCRIPT. Attributet SRC bör alltid användas i kombination med attributet TYPE.
script-taggen måste alltid ha den avslutande taggen också.
Filen fler_funktioner.js kommer (antagligen) inte laddas i exempel.
<html>
<head>
<title>Webbsida som länkar in extern fil</title>
<script src="mina_funktioner.js"></script>
<script src="fler_funktioner.js"
type="text/javascript" />
</head>
...Webbläsare är konstruerade för att ignorera (X)HTML-taggar de inte förstår. Detta gör det möjligt att använda äldre webbläsare även när nyare versioner av (X)HTML, med nya taggar, släpps. Webbläsare struntar dock inte i kod som finns mellan öppnande och avslutande tagg, d.v.s. där JavaScript-kod skrivs. Därför brukar man dölja koden för äldre webbläsare genom att "kommentera bort" koden med en (X)HTML-kommentar. Viktigt är, speciellt för äldre versioner av Netscape, att man "kommenterar bort" den avslutande (X)HTML-kommentaren m.h.a. en JavaScript kommentar - "--" är en operator i JavaScript. (Lite omständigt, men så fungerar det...:-). (En typ av kommentar i JavaScript är två snedstreck, "//" som i C och Java, före kommentarens text.
<html>
<head>
<script>
... själva koden ...
</script>
</head>Till början på sida
JavaScript kan, som sagt, användas för att göra webbsidor interaktiva och dynamiska. En del av detta innebär att man kommunicerar med besökaren, bl.a. genom text. Det finns ett antal sätt att kommunicera text med besökare i JavaScript:
Det första alternativet skedde, historiskt, främst när webbsida laddades medan de övriga kan ske när besökare gör något (d.v.s. en händelse uppstår - se sidan Händelser). Formulär används främst för att hämta information (data) från besökare (se sidan Formulär), men kan även användas för att visa information.
Idag (2008-08-08) finns det främst tre sätt att skriva till dokument:
write-metoderna (två stycken) var det ursprunliga sättet att skriva till ett dokument, men de kan främst användas när ett dokument laddas i klient (d.v.s. inte vidare dynamiskt). Microsoft lade därför till en egenskap innerHTML till element i dokument för att komma åt innehåll (text) i element i dokument (rubriker, stycken, m.m. - något som senare även följdes av andra tillverkare av webbläsare). Med denna egenskap kunde därmed innehåll i element läsas och ändras. Men detta löste inte problemet med att Microsoft hade sin egen dokumentmodell, d.v.s. hur man kunde "adressera" (komma åt) element i ett dokument. DOM var lösningen på detta (och en bättre lösning för övrigt)!
För att skriva till ett (X)HTML-dokument så kan man använda sig av en av metoderna write() eller writeln() i objektet document (se sidan Objekt för mer information om objekt och metoder). Detta är, som sagt, främst ett alternativ då vi vill skriva dynamisk information till ett dokument när det laddas. Koden skrivs då (oftast) där den dynamiska information ska infogas i webbsida (som t.ex. datum som denna webbsida sist uppdaterades längst ner på sida).
Metoden writeln(text) skriver text till (X)HTML-dokument och infogar en radbrytning i resulterande (X)HTML-kod (inte webbsida!) medan metoden write(text) bara skriver ut text. Exempel nedan visar hur vi använder de två metoderna.
document.write("Text att skriva till dokument");document.writeln("Text att skriva till dokument");
Metoderna skriver, som sagt, ut text till (X)HTML-dokumentet, d.v.s. vi måste även lägga till eventuella (X)HTML-taggar vid utskrift. I exempel nedan skrivs även P-taggar ut för att texten ska vara ett stycke.
document.write("<p>Text att skriva till dokument</p>");
Vill man så kan man kombinera både text, tal och andra datatyper i samma sats när man skriver ut. Man använder sig av plustecknet (+) för att slå samman ("konkatinera") det man vill skriva ut.
document.write("Talet är: " + 3 + " och udda");
Observera att plustecknet även används för addition. Därför kan det ibland uppstå fel om det första man vill slår ihop är ett tal. Följande exempel kan t.ex. generera ett fel:
document.write(3 + " och " + 2 + " är 5");
När en klient (webbläsare) laddar ett (X)HTML-dokument så skapar den en s.k. dokumentmodell eller elementträd ...eller nodträd som det heter med DOM-termer. Varje nod i trädet motsvaras av en tagg, attribut i tagg eller text inom tagg. (Se sidan DOM för mer omfattande beskrivning.)
DOM-gränssnittet (API:t) innehåller ett antal metoder för att manipulera noderna (taggarna, attributen och texten) i ett dokuments nodträd, d.v.s. ändra existerande noder samt lägga till och ta bort noder (element). Observera att dessa ändringar inte är synliga om man väljer att titta på källkoden för ett (X)HTML-dokument! (Förrvirande? Ja, till att börja med! Se sidan DOM, som sagt. :-)
DOM-metoderna, eller snarare DOM-gränssnittet, behandlas på sidan DOM (då det är ett ganska stort och "komplext" ämne).
Andra sätt att visa och hämta information från besökaren är att använda meddelanderutor (endast visa) och dialogrutor (fråga och erhålla enkelt svar). Observera att meddelanderutor kan uppfattas som irriterande och bör reserveras för t.ex. allvarlig fel eller viktiga meddelande!
För att visa en meddelanderuta använder man metoden alert(), vars syntax är enligt följande.
alert("Meddelande att visa");
Om man skriver kod för att visa en meddelanderuta/dialogruta mitt i ett (X)HTML-dokument så kommer renderingen ("ritandet") av webbsida att stanna upp tills meddelanderuta har stängts (d.v.s. besökare klickar på OK) som i exempel nedan.
Observera att meddelanderutor kan uppfattas som irriterande! Man bör därför använda meddelanderutor med måtta och främst för att påvisa fel, t.ex. felaktig data i ett formulär (se sidan Formulär).
För att hämta ett positivt eller negativt svar (d.v.s. Ja eller Nej) från besökare kan man använda en dialogruta med knapparna OK och Avbryt i. Dialogrutan visas genom att anropa funktionen confirm(). Resultatet från funktionen är true om besökaren klickade på knappen OK, false om knappen Avbryt. Detta resultat kan man sen använda för att avgöra om något ska utföras eller inte (se Villkorssatser på sidan Språket).
resultat = confirm("Fråga att ställa");
Exempel 1.2 - Dialogrutan confirm
Funktionen prompt() kan användas för att hämta en sträng från användaren. Funktionen har två parametrar - strängen med uppmaning till besökaren (fråga) och ett standardvärde som på strängen i dialogrutans textruta.
resultat = prompt("Uppmanande sträng", "standardvärde");
Exempel 1.3 - Dialogrutan prompt
Observera att även dialogrutor kan vara irriterande! Man bör därför använda meddelanderutor med måtta och främst för bekräfta saker, t.ex. för att fråga om man verkligen vill radera en produkt i en kundkorg.
Statusraden i webbläsaren (finns längst ner i webbläsare) är ett sätt att informera besökaren vad som är på gång. Texten kan (oftast) ändras genom att tilldela ett värde till objektet status eller eventuellt till egenskapen status i objektet window (... d.v.s. det varierar mellan webbläsare).
window.status = "text";
Observera att information som visas i en statusrad lätt kan förbises! Skälet till detta är att det kanske inte alltid är intuitivt för alla att titta i statusraden samt att mycket annan information presenteras där (och därmed kan "skriva över" din information). Använd därför inte statusraden som det enda sättet att förmedla viktig information.
Till början på sida
Varför tenderar det alltid bli saker över som inte går att kategorisera? Nåja, här följer några av dessa saker.
thisÄven i JavaScript finns en pekare (referens) som heter this,
men dess betydelse är inte riktigt samma som i andra programmeringsspråk.
Vad den pekar på "beror på sammanhang", bl.a.
på hur kod anropats. (Se sidan Formulär för exempel.)
Till början på sida
Nedan finns några webbsidor/-platser med mer information om ämnet på denna webbsida.