Alesna webbutveckling

Javascript

Animeringar

Textvågen

Javascript och stilar

Kalendern

Javascript i dag (inledning)

Javascript får väl sägas ha blivit de-facto standard för scriptning av webbsidor. Man kan förvisso även scripta med hjälp av VB-Script och JScript, men deras användningsområden är trots allt mindre.
Webbläsarnas javascriptskompabilitet har med åren blivit allt bättre. Det är inte så många år sedan, som ett ordinärt javascript var nedlusat med versionshantering och man kände, att man inte riktigt vågade lita på att använda javascript till lite mer avancerade klientlösningar.

Javascript exekveras på vanliga webbsidor, så för det mesta, undantag finns, så handlar det om klientlösningar. Ett spel skrivet i javascript fungerar, när det väl är inladdat i browsern, även om du drar ur kontakten till internet.
Språket är liksom de flesta scriptspråk otypat, vilket innebär att variablernas datatyper avgörs av javascripttolken under exekveringen. Syntaxen påminner starkt om c/c++, java mm.
Någon författare har hävdat att javascript snarare är objektbaserat än objektorienterat. Med det menade författaren, att javascript alltsom oftast arbetar med objekt, som finns i en browser och dess inladdade webbsidor. Men visst kan man skapa klasser och objekt även i javascript, så resonemanget haltar en aning.

Vi ska börja med att kika på de objekt, som finns i browsern och dess inladdade webbsida, enligt DOM, som är kort för Document Objekt Model. Där ska jag ge en del exempel på, hur man kan komma åt de olika objekten och deras attribut.

Ett första exempel - byta färger

<html>
<head>
	<!--Man kan lägga sina javascript var som helst på en webbsida, men funktioner
	ligger väldigt bra i head. Funktioner är block av kod under ett namn med en
	parameterlista. Fördelen med en funktion är att man kan anropa den flera
	gånger. I det här exemplet anropas funktionen, när man trycker på en knapp. Se nedan
	--!>
		<script>
			function changeColor(bgColor,fgColor)
			{
			/*
			   I det här exemplet har jag valt att manipulera sidans egenskaper
			   via stilmallen. Det måste anses vara det modernaste sättet att
			   arbeta på. Längre ner på denna sida, visas hur det gick till på det
			   lite äldre sättet
			*/
				document.body.style["backgroundColor"]=bgColor;
				document.body.style["color"]=fgColor;
			}
		</script>
	<style>
	body{margin:50px;padding:50px;background-color:rgb(0,0,0);color:rgb(255,255,0);}
	</style>
	</head>
<body>
	<h3>Javascript och jag</h3>
	<!-- här nedan följer instruktionen och attributen för en knapp. Knappen är egentligen
	     en formulärkomponent, men jag har valt att utelämna formuläret den här gången.
             Observera komponentens händelsehanterare. I den anges att en funktion, som heter
             changeColor och som tar två argument, ska anropas, när man trycker på knappen.
             Argumenten är förstås värdena för bakgrunds -respektiva förgrundsfärgerna.
             Pröva gärna att byta värdena --!>
	<input type="button" value="change" onClick="changeColor('#FF0000','#FFFFFF');";>
</body>
</html>

HTML och stilmallar

Det anses numer, och helt riktigt enligt min mening, att man ska använda sig av stilmallar, när man bygger upp webbsidor. Fördelarna är många, bland annat så delar man på vad som visas och hur det visade ska se ut på en sida.
Det har också fått konsekvenser för javascriptsfantomerna. Allt som oftast, så manipulerar man attributvärden via regler i stilmallen. För nostalgins skull, så visar jag hur det kunde gå till på "farfars tid" (hrm om farfar är ung).

<html>
<head>
		<script>
			function changeColor(bgColor,fgColor)
			{
			 /*
			Så här går det till, när man arbetar direkt med sidans
			attribut. Objektet document representerar den inladdade sidan.
			Via punkoperatorn kan man komma åt objektets metoder och attribut.
			*/
				document.bgColor=bgColor;
				document.body.fgColor=fgColor;
			}
		</script>
	<!--Observera att stilmallen har försvunnit!-->
	</head>
<body>
	<h3>Javascript och jag</h3>
	<input type="button" value="change" onClick="changeColor('#FF0000','#FFFFFF');";>
</body>
</html>