Introduktion till programmering i JavaScript

• Programspråk som ger funktionalitet åt webbsidor
• Programspråket kan köras i webbläsaren på klientsidan – inte på serversidan
• Programspråket infogas i HTML-koden med <script> ‐taggar:

  <script type="text/javascript">
      window.alert('Hello, World!'); // JavaScript‐kod
  </script>

  men kan också placeras i externa filer:

  <script type="text/javascript" src="test.js"></script>

• Placeras på olika ställen i HTML-koden
  • Brukar ligga i head -delen och körs då sidan läses in eller då koden anropas (vid användning av funktioner)
  • Läggs ibland i body -delen, om man vill att koden ska köras där

Video: Webbutveckling 2 – DOM och JavaScript

Variabler

Värden (data) i program sparas i variabler. En variabel är en ”behållare” för att spara ett värde, så att det senare kan användas. En variabel är alltså ett litet ”minne” i programmet. Variablerna deklareras med nyckelord var och ges ett namn, så att man kan referera till dem:

var birthYear = 1994;

Variabeln med namet birthYear får värdet 1994. För variabelnamn använd endast

• bokstäverna a…z, A…Z
• siffror 0…9
• _ (underscore: https://en.wiktionary.org/wiki/underscore)

OBS! Namn är känsliga för bokstavsregister: birthYear och birthyear är olika namn. Namnet får ej börja med en siffra. Se Code Conventions for the JavaScript Programming Language: http://javascript.crockford.com/code.html

Programsatser och uttryck

• Kommando/instruktion för att utföra något
• Jämför med imperativa meningar i naturliga språk:
  ”räkna ut personens åldern utgående från nuvarande år och personens födelseår”
• Avslutas i JavaScript med semikolon ;

Exempel: tilldelningssats

var currentYear = 2017;
var age = currentYear - birthYear;

Variabeln age får värdet 23.

Datatyper

Data kan anges i olika form och variabels i JavaScript kan hålla vilken datatyp som helst.

Speciella värden:

• Null: ingenting, utan specificerad typ, men framstår som ”object”
• Undefined: en variabel som inte fick något värde.
• NaN (Not a Number), men framstår som number: resultat då man försöker utföra en aritmetisk operation på värden som inte är tal, t.ex.

  var halvaTexten = "text"/2;
      console.log(halvaTexten); // printar ut NaN

Du kanske undrar varför NaN är inte samma som NaN, d.v.s. NaN==NaN resulterar i false. Det finns en giltig orsak till det: https://stackoverflow.com/a/1573715

Har du frågor om andra speciella värden i JavaScript? Skicka då din fråga till Julgubben: jag.undrar.varfor@gmail.com

Funktioner

Programkoden kan delas in i funktioner. Funktioner är återanvändbara block av kod som du kan skriva en gång och köra igen och igen, vilket eliminerar behovet av att skriva upprepande kod hela tiden. Det finns ett antal sätt att definiera funktioner, men för närvarande koncentrerar vi oss på en enkel typ.

// beskriver en funktion som tar vilken som helst person
// och returnerar dennes ålder

function age(person) {
    return (new Date()).getUTCFullYear() - person.birthYear;
};

Här har vi definierat en funktion med hjälp av nyckelord function, följt av namnet age, och sedan parentes och parametern person efter det. Därefter sätter vi två måsvingar { }. Inuti måsvingarna finns all den kod som vi vill köra när vi anropar funktionen. Sedan skapar vi en människa (object) och kallar den för teamMember:

var teamMember = {name: "Mauritz", birthYear: 1994};

Sedan ska vi köra vår funktion age, d.v.s. skickar vår människa teamMember som ett argument till parametern person i funktionen age och printar ut resultat enligt följande:

console.log( age(teamMember) ); // printar ut 23

Egentligen sku det vara snyggare och säkrare att skriva så:

var Person = function (name, bYear) {
    this.name = name;
    this.birthYear = bYear;
    this.age = function () {
        return (new Date()).getUTCFullYear() - this.birthYear;
    };
};

var teamMember = new Person('Mauritz', 1994);
console.log(teamMember.age()); // printar ut 23

Funktionen kan anropas

• från en annan funktion
• då webbsidan laddats
• från en tagg i HTML-koden, t.ex. en knapp som användaren klickar på

Fördelar med funktioner

• Programmet delas upp i mindre delar
• Det blir då mer strukturerat och överskådligt
• En funktion kan anropas flera gånger och från flera ställen