Bia Rask ● Webbkurs

ÖVRIGT

JAVASCRIPT

 

Som uppslagsverk kan du använda W3Schools JavaScript Tutorial och JavaScript Reference.

Mozilla Developer Network har en lärorik sajt om JavaScript där du också hittar en bra referens-del.

Använder du Bootstrap, läs getbootstap.com:s sida om JavaScript.

Dokumentobjektsmodellen, domskript & ecmascript

Ur kursplanen

Centralt innehåll

 

Bedömningskriterie för C & A

 

Kanske inte de enklaste orden att förstå, så vi börjar med att ta en titt på dem.

Dokumentobjektsmodellen

Som ett träd

Inom botaniken talar man om en nod (node) som en punkt på en växts stam eller stjälk som det utgår blad från. Även i HTML talar man om noder. Allt är noder. Dokumentet i sig självt är en dokumentnod. Alla HTML-element du lägger in är elementnoder. Alla egenskaper du lägger till är egenskapsnoder. Alla kommentarer är kommentarnoder. Noderna organsieras som ett träd - och vi är tillbaka i växternas rike. Här har jag ritat upp en enkel webbsida:

DOM-träd

Webbsidans noder kan liknas vid en stam med grenar som breder ut sig. Eller kanske mer som ett släktträd? Noden html har ingen föräldranod men två barnnoder (head och body). Head i sin tur har två barnnoder (title och meta), en syskonnod (body) samt en föräldranod (html). Meta och title är syskonnoder.

Jämför med HTML-koden:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Exempelsida</title>
  </head>

  <body>
    <header>
      <img src="/images/logo.png">
    </header>
    <main>
      <h1>Rubrik</h1>
      <p>Här är ett textstycke.</p>
     </main>
  </body>
</html>

 

Dokumentobjektsmodellen (dom)

Webbläsaren tolkar koden den får från servern och ritar upp strukturen internt för att veta hur den ska visa innehållet på webbsidan. DOM-strukturen håller ordning på hur olika delar som head, body, divar, texter, bilder med mera ska förhålla sig till varandra och hur de ska visas. Såväl HTML-koden som CSS-koden och skript (t.ex. JavaScript) som körs kan påverka strukturen. Detta sätt att beskriva sidan kallas dokumentobjektsmodellen, men förkortas oftast DOM.

Ibland vill man att något ska förändras efter att sidan byggts upp i webbläsaren, till exempel när besökaren håller muspekaren över något eller klickar på en knapp. Då kan man använda till exempel JavaScript för att göra ändringar i DOM-strukturen i den befintliga webbsidan.

 

Dom-panelen

Det här "trädet" hittar du i panelen DOM i Dreamweaver också (Fönster > DOM). För koden vi nyss tittade på ser det ut så här i DOM-panelen:

Panelen DOM

DOM-panelen är ett praktiskt redskap. Du kan stänga och öppna olika noder ("grenar") genom att klicka på dem för att få en tydligare överblick.

Panelen DOM

Vill du radera till exempel en div eller en rad (row) kan du högerklicka på den och välja Ta bort. Då förvsinner exakt det som ska bort, varken mer eller mindre. Det där med exakt är viktigt när du jobbar med kod. VIll du duplicera eller kopiera ett element kan du göra det genom att högerklicka. Självklart går det även klistra in det du kopierat genom att högerklicka i DOM-panelen där du vill klistra in elementet. Flytta objekt kan du göra genom att dra i det.

 

Ecmaskript

När JavaScript kom gick det undan. Det släpptes innan det var finslipat och innehöll en del konstigheter. Det kom olika versioner och Microsoft skapade en egen variant som kallas JScript. Det blev rörigt, kan man säga, och kpabiliteten med olika webbläsare var inte den bästa.

För att bringa ordning fick ECMA International i uppgift att göra en standardisering. Det standard som blev resultatet heter ECMA-262 och språket heter EcmaScript.

Ecmascript och JavaScript är inte samma sak. Både Javascript och JScript försöker vara kompatibla med EcmaScript, men både innehåller utökningar som inte specificeras av ECMA-262. JavaScript och JSript är inte heller fullt kompatibla med varandra eftersom de innehåller olika utökningar.

JavaScript innehåller alltså EcmaScript. EcmaScript kan tolkas av en JavaScript-kompatibel tolk, men en EcmaScript-tolk kan inte tolka all JavaScript.

(Källa: sv.wikipedia.org/wiki/Ecmascript)

Diskreta domskript

Tänk dig tillbaka till dokumentobjektsmodellen och trädet med alla noderna. Om man väljer en nod, till exempel ett textstycke, och lägger till egenskapen id och ett unikt värde till taggen, kan man påverka den med ett DOM-skript. Ett DOM-skript kan till exempel vara ett JavaScript.

<p id="demo">Jag har provat göra ett javaskript</p>


function bytText() {
document.getElementById("demo").innerHTML = "Och det fungerar!";
}

 

Då var det det här med diskret då. Googlar man på "diskreta domskript" kommer man till webbsidor som återger kursplanen utan vidare förklaring. Den engelska termen unobtrusive JavaScript har, enligt Wikipedia, ingen formell definition, men ungefär så här:

Ta inget för givet! Alla webbläsare stödjer inte JavaScript. Alla webbläsare fungerar inte likadant. Alla andra förstår inte din kod. Därför är det några saker du bör tänka på när du använder DOM-skript.

  1. Separera JavaScript-kod från innehåll (HTML-kod) och utseende (CSS-kod)! Genom att lägga JavaScripten i en separat fil gör du det enklare för andra - eller för dig själv i framtiden - att underhålla koden. Koden blir renare och lättare att felsöka och att hitta i.
  2. Se till att sidan fungerar även utan JavaScript! Ett diskret skript frågar "Stöder webbläsaren det jag vill utföra?" Om svaret är nej ska skriptet tyst avslutas. Det ska inte komma några felmeddelanden och sidan ska ändå fungera. Ett skript ska göra sidan ännu mer användbar för den som kan ta del av det, men alla ska kunna ta del av webbsidans innehåll.
  3. Följ standard! Din kod ska vara ren och snygg och följa standard så den är kompatibel med så många webbläsare som möjligt. Ofta infogar man skript andra har skrivit istället för att skapa egna. Var noggrann med vad du väljer då många är dåligt skrivna!

(Källor: www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript och en.wikipedia.org/wiki/Unobtrusive_JavaScript)

Läs även PTS riktlinjer för att användning av JavaScript.

 

Javascript

Om javascript

JavaScript kan användas till väldigt mycket. Några exempel är bildspel, menyer, spel, knappar, kontrollera ifyllda data i ett formulär innan de skickas och mycket annat.

Du kommer inte att bli en mästare i JavaScript i denna kurs, utan bara prova lite, lite så att du kan infoga sådana när du behöver dem. Faktum är att du redan har använd sådana i kursen, även om du kanske inte varit medveten om det, till exempel när du byggt sidor med Bootstrap.

Det finns gott om färdiga skript att ladda ner från nätet. Tyvärr är många av dem dåliga. Förhoppningen är att du, efter att ha provat på lite, ska få en viss grundförståelse och därmed minska risken att lägga in dåliga skript.

Ett JavaScript kan bäddas in i en HTML-sida eller läggas i en separat fil (ungefär som stilmallar). Rekommendationen är att placera skript i sepratata filer (just det, precis som med stilmallar).

JavaScript består av två huvudsakliga beståndsdelar:

Om du vill studera andras JavaScript går det bra eftersom skriptet ligger antingen i HTML-filen eller en separat fil som du hittar adressen till i HTML-koden. Prova högerklicka i webbläsarfönstret och välja Visa källa eller något liknande. Det fungerar i många webbläsare.

Inbäddat i HTML

Här tittar vi på hur man JavaScript direkt i HTML-dokument, men du ska vara medveten om att rekommendationen är att lägga skripten i separata filer.

JavaScript kan placeras både i <body> och <head> på en HTML-sida. Har du flera skript, är det en god vana att samla dem på ett ställe. Även om det fungerar att lägga dem var som helst, kan det vara bäst att lägga dem på slutet, precis för sluttagen för </body>. Anledningen är att man inte vill att besökaren ska behöva vänta på att webbsidan laddas medan webbläsaren tolkar koden.

Skriptet ska läggas i <script>-taggar.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Mitt första JavaScript</title>
</head>

<body>
<p id="demo">Jag har provat göra ett JavaScript</p>

<button type="button" onclick="bytText()">Tryck här!</button>

<script>
function bytText() {
document.getElementById("demo").innerHTML = "Och det fungerar!";
}
</script>

</body>
</html>

Resultat

Jag har provat göra ett JavaScript

I separat fil

Genom att lägga skript i separata filer, gärna samlade i en mapp (namnges ofta js) får man kod som är lättare att överblicka och fördelen att samma skript går återanvända till flera sidor.

Skriptet ska ha filändelsen .js.

För att skapa en JavaScript-fil i Dreamweaver går du till menyn Arkiv > Nytt > JavaScript > Skapa. I exemplet heter filen mittskript.js och läggs i mappen js.

function bytText2() {
document.getElementById("demo2").innerHTML = "Och det fungerar också!";
}

För att använda skriptet anges adressen till skriptet efter src i <script>-taggen. Raden läggs helst före sluttagen för </body>. Det fungerar att ha den på andra ställen i HTML-koden också, men när webbläsaren ser raden avbryter den tolkningen av sidan för att hämta och tolka skriptet. Det kan vara störande för den som väntar på att få läsa webbsidan.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Mitt andra JavaScript</title>
</head>

<body>
<p id="demo2">Jag har provat göra ett till JavaScript</p>

<button type="button" onclick="bytText2()">Tryck här!</button>

<script src="/js/mittskript.js">
</script>
</body>
</html>

Resultat

Jag har provat göra ett till JavaScript

 

En titt på koden

Vi tittar på koden i exemplet ovan. Vi börjar med att påminna oss om hur det såg ut i HTML-dokumentet:

<p id="demo">Jag har provat göra ett JavaScript</p>

<button type="button" onclick="bytText()">Tryck här!</button>

Stycket har fått ett id, "demo", för att vi ska kunna identifiera det. Vid knappen anges att när besökaren klickar på den, onclick, ska funktionen som fått namnet "myFunction" utföras.

Och så här såg det ut i JavaScriptet:

function bytText() {
 document.getElementById("demo") .innerHTML = "Och det fungerar!";
}

Skriptet består av en funktion som fått namnet bytText. När besökaren klickar på knappen letar webbläsaren upp funktionen bytText i skriptet. Där får webbläsaren instruktionen att anropa noden som fått namnet demo med hjälp av dess id. I det HTML-dokumentet (InnerHTML) ska texten bytas ut mot textsträngen som anges i skriptet ("Och det fungerar!").

Javaskript-syntax

Uttryck (statement)

Ett uttryck är en instruktion som ska utföras av webbläsaren. Ett skript är komponerat av ett eller flera uttryck. Kallas även satser.

document.getElementById("demo").innerHTML = "Och det fungerar!";

Läs mer om uttryck på w3schools.com.

 

Funktioner (functions)

Funktioner är mycket användbara. Man kan säga att det är namngivna samlingar av uttryck. Du definierar dem en gång och kan sedan återanvända dem genom att anropa dem.

En funktionsdeklaration kräver nyckelordet function.

function name(parameter1, parameter2, parameter3) {
code to be executed
}

function myFunction() {
document.getElementById("demo").innerHTML = "Och det fungerar!";
}

Funktioner kan, men måste inte, ta emot värden. Ofta är värdet sant om allt gick bra i en viss process, och falskt om det inte gjorde det, men det kan också vara siffror och ord.

Läs mer om funktioner på w3schools.com.

 

 

Värden (values)

Literals är fasta värden. Siffor kan skrivas med eller utan decimaler. Texter skrivs inom dubbla eller enkla raka citattecken.

document.getElementById("demo").innerHTML = 10.50;

document.getElementById("demo").innerHTML = "Och det fungerar!";

document.getElementById("demo").innerHTML = 'Och det fungerar!';

Varibles är variernade värden. Nyckelordet för att tala om att det är en variabel är var. (I det första exemplet nedan definerias x som en variabel. Sedan gex x värdet 5.)

var x;
x = 5;
document.getElementById("demo").innerHTML = x

var x = 5;
var y = 8;
document.getElementById("demo").innerHTML = x + y;

Läs mer om variabler på w3schools.com.

 

 

Operatorer (operators)

Operatorer är JavaScripts motsvarigheter till det vanliga språkets konjunktioner. De används för att jämföra och tilldela värden till variabler. Några exempel: +, -, %, =, *=, <=, ?.

Läs mer om operatorer på w3schools.com.

 

Nyckelord (keywords)

Det finns en del ord som är reserverade i JavaScript, nyckelord. Dem ska man inte använda som variabler eller för att namnge funktioner. Några exempel är var, function, false, true.

Läs mer på w3schools.com.

 

Kommentarer (comments)

Använd kommentarer! Genom att förklara skriptet med vanliga ord underlättar du mycket för andra som försöker förstå det eller för dig själv när du ska underhålla det.

Kod efter // eller mellan /* och */ kommer att ignoreras.

// Behöver inte avslutas.

/* Längre kommentarer som sträcker sig över fler rader ska ha både start och avslutning. */

 

Namn (identifiers)

Namn kan börja med en bokstav, understreck eller dollartecken i JavaScript, men inte med siffror. JavaScript känner av små och stora bokstäver, så efterNamn och efternamn är olika namn.

efternamn = "Karlberg";

 

Läs mer

Det finns massor mer att lära om JavaScript, bland annat på w3schools.com. I JavaScript Reference hittar du förklaringar till det mesta. Klicka på den ruta du vill veta mer om (eller använd menyn).

Du har nosat på hur JavaScript är uppbyggda, och även om du inte bygger avancerade skript direkt efter detta, vet du ungefär hur de är uppbyggda och kan använda andras skript på din sida. Du fixar förmodligen att göra enklare modifikationer också.

Titta gärna på exempelskripten på w3schools.com. Klicka på något av skripten så öppnas en ny sida där du kan se hur det är gjorda och prova göra ändringar.