JavaScript på webbsidan

JavaScript som är ett klientbaserat scriptspråk, kan användas, och används, till en mängd olika saker på webben. Vanliga exempel är:

  • dynamiska menyer
  • validering av inmatad data i ett formulär
  • pop-up-fönster
  • rollover/mouseover-bilder
  • undersökning av vilken webbläsare besökaren använder
  • datum då sidan senast uppdaterades

Meningen med att vi tittar på JavaScript är inte att du ska bli en fullfjädrad programmerare utan mest att du ska få en inblick i hurman kan skapa mer dynamik på en webbsida med hjälp av javaScript.

På webben finns många bra tutorials som visar hur du lägger till olika ”finesser” till din webbsida. På webdesignskolan.se finns information om hur du exempelvis gör CSS- och DHTML-menyer, till exempel menyer med ”dropdown-funktion”:

http://www.webdesignskolan.se/css-meny/css_meny.htm (nytt fönster)

Tutorials som går igenom klientbaserad scriptprogrammering med JavaScript (länkar öppnas i nytt fönster):

Objekt

JavaScript är ett objektbaserat scriptspråk med relativt enkel syntax som du kan använda för att exempelvis ändra värden på olika objekt på dina webbsidor, skriva ut datum och budskap beroende på datum, tid mm. Du kan använda JavaScripts egna inbyggda objekt och/eller skapa egna. JavaScript är klientbaserat, vilket innebär att det är användarens egen dator som arbetar med scripten du lägger till. Detta innebär också att om användaren stängt av möjligheten att köra JavaScript så kan din webbsida påverkas negativt, så användande av JavaScript är alltid något du måste överväga noga. Fungerar din webbplats både med och utan eventuella script?

På Wikipedia kan du läsa en kort översikt av vad JavaScript (nytt fönster) egentligen är och var det kommer ifrån.

Objekthierarki i webbläsaren

Nedan ser du några av alla inbyggda objekt som rör webbläsaren. Det som jag nedan benämnt mittFormular, enKnapp, enLank och så vidare är det som du i din (X)HTML-kod angett med hjälp av attributet id: <form id=”mittFormular”>, <div id=”nyhetsruta”> osv.

Enkelt uttryckt kan man säga att uttrycket ”document.mittFormular.enSubmitknapp” är adressen till formulärets Submitknapp. När du vet adressen kan du påverka ”adressaten” på något sätt.

Objekt – Syntax för att nå objektet i din webbläsare
window - behöver oftast inte anges då vi i princip förutsätts befinna oss här.

I objektet window befinner sig i sin tur
frame, parent, self, top, document

I objektet document kan du exempelvis lägga
form, link, anchor

Adressen för att nå ditt formulär som ligger på en webbsida skrivs enligt följande, där mittFormular är det id du valt att ge formuläret: document.mittFormular

Tittar vi närmre på objektet form så finns där i sin tur lite olika objekt: button, checkbox, submit, reset

Adressen till formulärets olika knappar och fält skrivs då på följande sätt: document.mittFormular.enKnapp

Med ”koll” på alla fält i ett formulär kan du utnyttja JavaScript för att skapa funktioner som kontrollerar att användaren fyllt i alla formulärfält.

I JavaScript har du även en rad helt fristående objekt som inte passar in i objekthierarkin ovan. Det gäller till exempel date och navigator. Exempel på syntax för användning av dessa:

date() – datum
alert(navigator.appName) – den här funktionen framkallar en dialogruta som skriver ut vilken webbläsare besökaren har – testa (nytt fönster)

Metoder och funktioner

JavaScript har metoder som utför något på själva objekten. Nedan ser du ett exempel på ett enkelt script som skriver ut en text på webbsidan. En metod är en typ av funktion som bara gäller för ett visst objekt. Vissa objekt har många metoder medan andra bara har en. En knapp kan man till exempel bara göra en enda sak med: click().

<script type=”text/javascript”>
document.write(”Hello World!”)
</script
>

Du lägger till ett JavaScript i (X)HTML-filen med hjälp av elementet script.

Vissa metoder behöver parametrar/argument för att fungera. I exemplet ovan har metoden write() fått parametern ”Hello World!”.

Testa scriptet (nytt fönster)

Funktioner

I funktioner har man grupperat små kodsnuttar som utför en speciell uppgift. Genom att skapa funktioner kan man enkelt anropa funktionen från flera olika ställen på sin webbsida/webbplats och be den utföra samma sak.

Syntaxen för en funktion

function funktionsnamn(){Här skriver man det som funktionen ska utföra}

JavaScript-funktion som utför beräkning.

Exempel på en funktion för att utföra en beräkning.

Placering av JavaScript

Ditt JavaScript placeras inuti ett script-element på webbsidan. Du kan sedan välja att lägga ditt javaScript direkt i head-elementet, som en länk till en extern fil eller i body-elementet.

Prova att lägga scriptet ovan i body-elementet på en webbsida!

Script som innehåller funktioner placeras i head-elementet så att scriptet säkert laddas in före funktionen anropas från body-elementet. Script som ska exekveras/köras när sidan laddas, placeras i body-elementet. Exempelvis ”document.write()”. Du kan ha flera javascript på samma sida.

<html>
<head>

<script>JavaScript som utför något…</script>
<script src=”kod.js”></script><!– Länk till externt JavaScript –>
</head>
<body>

<script>JavaScript som utför något…</script>
</body>
</html>

Du kan placera ett eller flera javascript på olika ställen i din (X)HTML-fil.

Nedan ser du en snabbintroduktion från youtube som visar de absoluta grunderna i JavaScript.

 

Leave a Reply