STARTSIDAN - ANSLAGSTAVLA - ACTIVE X - ABC-KOM IGÅNG - CGI - DIVERSE - FAQ - FORMULÄR - FRAMES - GRAFIK - DHTML - HTML4 - HTML - JAVA - JAVASCRIPT - LISTOR - LÄNKAR - SITEMAP - SÖK - TABELLER - TEXT - ANNICA TIGER - TIGER-LÄNKAR - TIPS - STYLE SHEETS - CSS - WAP - WEB-DESIGN - XHTML - XML

Javascript - kort introduktion

Javascript - kort introduktion
Olika versioner av Javascript
Objekt, egenskaper och metoder
Termer i javascript
Två förklarande exempel
Exempel på Javascript

Javascript - kort introduktion
Observera trots likheten i namnet så har Java och Javascript inget gemensamt. När java sänder ner applets och kör ett program så är javascript så att säga inbyggt i själva html-dokumentet. Man använder sig av s.k inbyggda manus. Koden läggs oftast i dokumenthuvudet (inom head-taggarna) och anropas sedan inne i dokumentet, utom i vissa fall direkt inom body just där man vill att det ska utföra något, exempelvis skriva in något i html-sidan. Scriptet läggs inom som en dold kommentar, via <!-- och //-->. Varför man lägger Javascriptet som en dold kommentar? Det är för att förhindra att browsers som ej stödjer JavaScript ska visa hela programmerings-koden. För dem kan man även använda noscript, som ignoreras av de browsers som tolkar javascript.
<noscript> text till de som inte kan eller inte vill stödja javascript </noscript>

Olika versioner av Javascript
Javascript finns i flera versioner och MSIE har (som vanligt) tagit fram sin egen variant, Jscript.

Vill du jobba med ex. en gammal version som Javascript 1.1 kan du undvika att javascriptkompartibla läsare som INTE hanterar den versionen genererar ett error-meddelande genom att i script-taggen ange versionsnummer, gäller andra versioner också - se dokumentationen.
<script language="JavaScript1.1" type="text/javascript"> .
Fr.om 1.1 ska man även kunna ha javascriptfilen i en separat fil och peka på den med src="filen.js".

En varning på sin plats. Bygg inte hela din sida på användning av javascript, ge besökare utan stöd av javascript eller om de har avaktiverat det av säkerhetsskäl möjlighet att kunna få ut det mesta möjliga av din hemsida. Navigering t.ex får absolut inte enbart byggas på javascript, tillhandahåll enkla textlänkar någonstans åtminstonde, se taggen noscript. Illa kodade javascript kan släcka ned besökarens browser. Kolla att dina inlagda javascript fungerar i både Netscape och Internet Explorer.

Objekt, egenskaper och metoder
I javascript figurerar många olika termer och nedan ska jag försöka klargöra några lite kort. Javascript är ett objekt-orienterat programmeringsspråk. Det finns inbyggda objekt (Date, Array och String), browser-objekt (ex, window, document, form, history och location) och man kan deklarera egna objekt via class (överkurs). Objekten har olika egenskaper beroende på vad det är för typ av objekt. Ett exempel på ett browser-objekt är document, vilket innehåller innehåller all information om den av besökaren inladdade html-sidan - några exempel på egenskaper till document är bgColor, fgColor, form, lastModified och location.

Bli inte förvirrad nu, objekten kan till synes ha samma namn som egenskaper, men betyder då olika beroende på vart de står, före eller efter punkten/erna (.) i scriptet. Objektet location - innehåller den kompletta informationen om urlen (adressen) och kan ändras. Men egenskapen location till objektet location innehåller bara en del av den informationen, en sträng med urlen till det aktuella fönstret och strängen går ej att ändra på - read-only. Krångligt? Nördfaktor 100? Det kan bara vara bra att veta så man inte förvirras i onödan.

Objekten har sedan metoder, en metod utför något på själva objektet, metoden write ihopkopplat med objektet document
document.write("Detta är ett exempel!");
skulle skriva ut strängen "Detta är ett exempel!" i html-dokumentet på den plats scriptet fanns. Man kan säga att en metod är en funktion (se längre ned om funktioner) som tillhör ett visst objekt. Observera att objektet listas först, sedan en punkt (.) och sedan metoden write som i sin tur skriver ut strängen efter inom komma-tecknen, till sist kommer ett avslutande ;-tecken. Exempel på fler metoder är alert och confirm (metoder till objektet window) samt ett annat exempel är getTime (metod till objektet Date).

Javascript är till stor del ett språk riktat mot olika händelser, ett exempel är när du klickar på en länk (Click). För att koppla ihop dessa händelser till något som ska hända finns händelsehanterare, händelsen Click har händelsehanteraren onClick. Några andra vanliga händelsehanterare i javascript är onMouseOver, onMouseOut, onLoad, onUnLoad och onFocus. Klicka i rutan Ändra! nedan så får du ett exempel på ett javascript inkodat direkt i händelsehanteraren onClick kombinerat med objektet document och egenskapen bgColor. Observera att objektet listas först, sedan en punkt (.) och sedan egenskapen bgColor (vill du ändra textfärg använd istället egenskapen fgColor) med ett efterföljande värde, till sist kommer ett avslutande ;-tecken, ska något citeras inom strängen använd '-tecken. Att man anger action="*" i form-taggen beror på att det är obligatoriskt och brukar vara en url, men här anges det till en *.
<form action="*">
<input type=radio name=farg onClick="document.bgColor='silver';"> Ändra!
<input type=radio name=farg onClick="document.bgColor='white';"> Återställ!
</form>

Ändra! Återställ!

I de flesta javascript anropas funktioner (ett antal instruktioner), oftast ligger dessa javascript inom head-taggarna. Det finns fördefinierade funktioner men man kan skapa sina egna, vilket är vanligt. Konceptet är ett funtionshuvud, med namn och eventuella argument som ska skickas med inom (). Sedan kommer funktionskroppen omgiven av måsvingar { och }, glöm ej dessa. Sedan anropas funktionen via funktionsnamnet och så kommer det som står inom måsvingarna att utföras, allt mellan två måsvingar hör alltså ihop.
funktionsnamn (ev.argument)
{
instruktionerna, vad som ska göras
}

Denna funktion nedan ligger inom detta dokuments head-taggar. Den funktionen anropas via denna länk, För musen över här!
<script language="JavaScript" type="text/javascript">
<!--
function visaruta ()
{
alert ("Klicka på OK för att stänga rutan!");
}
//-->
</script>

Funktionen visaruta() anropas sedan här av en länk och i den en händelsehanterare, onMouseOver:
<a href="fil.html" onMouseOver="visaruta()">För musen över här!</a>
Skulle du av någon anledning vilja ha flera funktioner knutna till samma händelsehanterare går det bra.
<a href="fil.html" onClick="ruta(); skapaRemote();">.

Termer i javascript
Detta är ingen komplett javascriptguide, men vissa termer kan vara bra att veta lite om även om man inte skriver egna script. Variablar (var) används för att mellanlagra värden (platshållare), man namger variabeln och tilldelar den ett värde med tilldelningsoperatorn, =. Det finns datatyper, tal, boolean, null, objekt och strängar. Datatyperna definierar vad de olika variablarna ska innehålla. Konstanter är en variabels motsats, en platshållare med konstant innehåll.

Operatorer, krångligt att beskriva men små inbyggda funktioner, ta tilldelningsoperatorn som skrivs med ett vanligt likhetstecken, a=b+d; eller +, -, * och / som tillhör de aritmetiska operatorern, detta är definitiv överkurs men det kan vara bra att ha hört ordet operatorer. Något som däremot är nyttigt att känna till är villkor, ett sätt att välja väg i ett program med, if eller else. Man kan styra programkörningen via loopar, for eller while.

Två förklarande exempel
Mycket snack och lite verkstad :)! Det _är_ mycket att hålla reda på och en hel del att försöka förstå, men låt det ta den tid det tar, som jag alltid säger *trial and error* - pröva och öva är bästa metoden att lära sig saker. Den som misslyckats har i alla fall försökt. För att tydliggöra en del av uttrycken i avsnitten ovan ska två exempel visas mer i detalj i detta avsnitt.

<script language="JavaScript" type="text/javascript">
<!--
function ruta()
{
skriva = prompt("Hej, vad heter du? Skriv in ditt namn!", "Ditt namn?");
if(skriva)
alert("Hej och välkommen till min sida " + skriva);
}
//-->
</script>

Scriptet ovan lägges inom head-taggarna. Scriptet anropas inom dokumentet via:

<form action="*">
<input type=button value="Klicka här!" name=knapp onClick="ruta();">
</form>

Vad händer? Knappen tycks in, klickas på och händelsehanteraren onClick aktiveras via
<input type=button value="Klicka här!" name=knapp onClick="ruta();">
då anropas funktionen, function ruta () som finns i javascriptet i dokumentets huvud (inom head). Då kommer det som finns inom måsvingarna att utföras, skriva är en variabel som ska *lagra* det namn som skrivs in. Metoden prompt ger en dialogruta med texten "Hej, vad heter du? Skriv in ditt namn!" och med ett redan ifyllt värde "Ditt namn?", som det är meningen att man ska ändra på.
skriva = prompt("Hej, vad heter du? Skriv in ditt namn!", "Ditt namn?");

När det är gjort trycker besökaren antingen på OK eller Cancel i dialogrutan som dyker upp ( Cancel returnerar null, falskt). När OK klickats på aktiveras metoden alert som laddar en annan dialog-ruta in med texten "Hej och välkommen till min sida " och variabeln skriva är förinfyllt, vilket görs med ett anrop att värdet i variabeln skriva ska in där, det görs med + skriva sist i strängen.
alert("Hej och välkommen till min sida " + skriva);

Scriptet anropas via en knapp i exemplet här, men skulle lika gärna kunna anropas när dokumentet laddas in via
<body text="#000000" bgcolor="#ffffff" onload="ruta();">

En fjärrkontroll är bra att ha, det finns olika varianter på hur man skapar en sådan. Här nedan kommer ett krångligt, men användbart exempel samt ett betydligt enklare exempel efter. Det kan bli oavsikliga radbrytningar i exempelkoden nedan.
<script language="JavaScript" type="text/javascript">
<!--
function skapaRemote()
{
remote = window.open("", "fjarr", "resizable=yes,status=yes,width=450,height=200");
remote.location.href = "urlen, adressen till fönstret";
if (remote.opener == null) remote.opener = window;
remote.opener.name = "opener";
}
//-->
</script>

Du anropar sedan funktionen i scriptet ovan via en vanlig länk.
Fjärrkontroll, klicka här!
<a href="javascript:skapaRemote();">Fjärrkontroll, klicka här!</A>

Variabeln remote ger en referens till det nya fönstret som skapas. Metoden open för objektet window talar om att ett nytt fönster ska öppnas.
remote = window.open("", "fjarr", "resizable=yes,status=yes,width=200,height=200");
Man kan sända med tre argument till open, urlen (adressen), "" här är den strängen tom. Man kan namge det nya fönstret, "fjarr" och det är bra om man ska länka dit sedan från andra fönster. En sträng kommer sedan som sätter fönstrets egenskaper, "resizable=yes,status=yes,width=200,height=200" .
Egenskaperna kan vara toolbar, location, status, menubar, scrollbars, resizable (alla frivilliga) och så givetvis height och width (som är obligatoriska) i pixels, alla utom dessa sista två kan få *värdena* yes eller no - de separeras med komma-tecken. Strängen som ska sända urlen är i detta script tom, här har urlen angetts via
remote.location.href = "urlen, adressen till fönstret" . Här kan du läsa mer om vad man kan göra med de olika egenskaperna, samt fler exempel.

Nu blir det krångligt :), via en if-sats kollas om remote.opener är, null (falskt) dvs inte pekar mot något fönster, om inte sätts egenskapen till window , dvs en pekare mot det urprungliga fönstret.
if (remote.opener == null) remote.opener = window;
Till sist, anger remote.opener.name = "opener"; ett namn på det fönster vartifrån remote har öppnats, bra om man vill länka tillbaks dit via target="opener". Detta sista var definitivt överkurs, men du kanske förstår hur komplext ett enkelt litet javascript kan synas vara för en nybörjare.

En enklare variant är denna nedan som via händelsehanteraren onClick öppnar ett litet fönster.

<form action="*">
<input type="button" name="liten" value="Klicka här om du törs" onClick="remote=window.open ('din_fil.html', 'fjarris', 'width=450,height=200');"
</form>

Exempel på Javascript
Nedan följer exempel på olika javascript, det som du kan/ska ändra på är rödmarkerat i exempelkoden.

© Annica Tiger a_t@tele2.se

Besök gärna min blog

Mina andra sidor ser ni nedan.

www.tiger.se, www.atiger.se, www.tiger.pp.se, www.atiger.pp.se, www.atiger.nu och www.nodaddy.se.


STARTSIDAN - ANSLAGSTAVLA - ACTIVE X - ABC-KOM IGÅNG - CGI - DIVERSE - FAQ - FORMULÄR - FRAMES - GRAFIK - DHTML - HTML4 - HTML - JAVA - JAVASCRIPT - LISTOR - LÄNKAR - SITEMAP - SÖK - TABELLER - TEXT - ANNICA TIGER - TIGER-LÄNKAR - TIPS - STYLE SHEETS - CSS - WAP - WEB-DESIGN - XHTML - XML