JavaScript- Ge liv till statiska HTML-sidor

Frågor på det vi gjort hittills?

• Förra föreläsningen (layout med CSS)

• Inlämningsuppgiften?

• Övrigt?

Dagens föreläsning

1. Snabb introduktion till vad JavaScript är

2. JavaScripts historik

3. Variabler

4. In-/utmatning av data

5. Exempel

Programmering handlar om att instruera en maskin eller del av en maskin […] att utföra ett

visst arbete.

Vad är JavaScript?

• En teknik för att utveckla interaktiva webbsidor

• Ett programspråk inbäddat i webbläsare

http://en.wikipedia.org/w/index.php?title=File:Unofficial_JavaScript_logo_2.svg&page=1

Har ni sett det innan?

I vilket sammanhang används JavaScript?

JavaScript

CSS

HTML

Innehåll

Interaktivitet

Utformning

Struktur

Innehåll

Exempel på JavaScript

• Bildspel: http://wowslider.com/javascript-slideshow-quiet-rotate-demo.html

• Dynamisk innehåll: http://gmail.com, http://facebook.com, https://twitter.com/

• Beräkningar: http://valuta.se

• Validera formulär: http://yensdesign.com/tutorials/validateform/

• Dialogrutor: http://tibbelit.se/film

• Interaktiva element: http://mrdoob.com/projects/chromeexperiments/ball_pool/

• Spel: http://www.phoboslab.org/ztype/

• Animationer: http://codepen.io/juliangarnier/pen/idhuG

• och mycket mera!

JavaScript - Historik

• Utvecklades av Netscape under mitten av 90-talet

• Har inget med Java att göra – det är ett eget programmeringsspråk

• Microsoft skapade sin egen version av JavaScript – Jscript

• På senare dagar (2005) har ajax blivit en populärt

• Lägger till extra funktionalitet för webben och webbläsare

Vad kan man göra med JavaScript?

• I princip vad du vill! (som har med webbsidor att göra)

• Men det används ofta till att skapa interaktiva webbsidor

• Med interaktiv menas: Reagera på användaras handlingar och modifiera webbsidans innehåll

Programmering

• Att ge instruktioner till en maskin så att den utför det man vill

• Del av att utveckla programvara

• Kreativ problemlösande verksamhet

• Konstform?

Programspråk

• En dator kan endast utföra ett begränsat antal instruktioner

• Varje instruktion är mycket begränsad, t.ex.- Addera innehållet i två minnesutrymmen- Flytta innehållet i ett minnesutrymme till ett annat utrymme

Maskinkod för att skriva ut 1+2+…+10=55

00110001 00000000 00000000

00110001 00000001 00000001

00110011 00000001 00000010

01010001 00001011 00000010

00100010 00000010 00001000

01000011 00000001 00000000

01000001 00000001 00000001

00010000 00000010 00000000

01100010 00000000 00000000

Lågnivåspråk

• Språk som behöver liten eller ingen bearbetning för att exekveras på en dator

• Maskinkod – kod som maskinen kan exekvera direkt

• Assemblerspråk – kräver en viss översättning, s.k. assemblering, innan programmet kan exekveras.

Högnivåspråk

• Mer anpassade för människor att läsa/skriva

• Måste översättas (interpreteras eller kompileras) till maskinkod innan det kan exekveras.

• En instruktion i ett högnivåspråk leder ofta till ett antal instruktioner i maskinkod.

• JavaScript, Java, C#, C++, Python, Ruby, ASP, JSP – och 5000(?) andra.

JavaScript

• För JavaScript sköter webbläsaren körningen

• Webbläsaren är alltså en interpretator (tolk) för JavaScript-kod

• JavaScript är ett av de enklaste programspråken att komma igång med

Programspråk

• Programspråk är, till skillnad från t.ex. svenska och engelska, formella språk

• De ska uttrycka något utan tvetydighet.

• Men programspråk delar vissa likheter med naturliga språk –vokabulär och grammatik.

• Även uttryck och instruktioner.

The man hit the boy with the stick

Who is holding the stick?

Requirements Management, DA254A 7.5 ECTS, VT2014, annabella.loconsole@mah.se

21

MAN BOY

The man hit the boy with the stick

Who is holding the stick?

Requirements Management, DA254A 7.5 ECTS, VT2014, annabella.loconsole@mah.se

22

MAN BOY

Uttryck (expression)- Kod som producerar ett värde• UTTRYCK

• ”5”+”8”

• 3 + 5

• 20/2 + 3*4

• "Hejsan"

• "Hej” + ” ” + "du"

• 5 > 2

• VÄRDE

• 58

• 8

• 22

• "Hejsan"

• "Hej du"

• true

Instruktion (statement)

• Ett program består av en lista instruktioner

• En instruktion består av minst ett uttryck och avslutas med ett semikolon ”;”

5;alert(”Hej och välkommen”);var birthYear = 2016 – age;

Att skapa ett program

• Uppgiftsformulering, vad är det för uppgift som ska lösas?

• Vilka steg behöver utföras för att lösa uppgiften?

• Vilka instruktioner kan användas för att utföra varje delsteg (algoritm)

Algoritm

• En beskrivning över hur man löser ett problem. Algoritmen består av ett antal instruktioner och beskriver i vilken ordning instruktionerna ska utföras.

http://www.recepten.se/recept/pasta_carbonara.html

http://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/LampFlowchart-sv.svg/250px-LampFlowchart-sv.svg.png

Övning!

• Vilka instruktioner (vilken algoritm) krävs för en dator för att sortera följande bokhög i bokstavsordning:• Modern PHP

• Graph Databases

• Rest in Practice

• Användbarhet i praktiken

• Information Architecture

• Computer science illuminated

Att tänka på

• Uppgiftsformulering, vad är det för uppgift som ska lösas? Formulera uppgiften i termer av vad en dator kan utföra. Avgränsa problemet, vad är en del av uppgiften? Vad ingår inte?

• Algoritmkonstruktion, vilka algoritmer är de mest lämpliga för detta problem? Konstruera strukturen på programmet och skriv ner så kallad pseudokod. Detta är kreativ problemlösning.

• Kodning, översätt pseudokoden till ett programmeringsspråk t.ex. JavaScript eller Python

• Dokumentation, beskriva din lösning både i löpande text, med hjälp av UML och som kommentarer i programmet.

• Verifikation, är programmet byggt på ett bra sätt så att det löser uppgiften utan att fel uppstår och det är lätt att underhålla.

• Validering, är användaren nöjd med hur programmet fungerar. Underhåll, åtgärda buggar, förbättra och lägg till funktionalitet.

• Underhåll, åtgärda buggar, förbättra och lägg till funktionalitet.

JavaScript

• JavaScript skrivs som ren text

• Det kan skrivas antingen inbäddat direkt i HTML-koden

• Eller i en separat fil, som sedan inkluderas i HTML-dokumentet

Inbäddat skript

• HTML-elementet <script> används för att definiera ett JavaScript-block.- Jämför detta med att inkludera inbäddad CSS-mall med hjälp av <style>

• Elementet <script> kan placeras var som helst i HTML-dokumentet, inte bara i <head>

• JavaScript-koden körs på den plats JavaScript-elementet finns.

Externt skript

• JavaScript-koden sparas i en separat fil, med filändelsen .js

• Skriptfilen inkluderas i HTML-dokumentet, också med hjälp av elementet <script>

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

Uttryck och instruktioner i JavaScript

Datatyper i JavaScript

• Det finns sex datatyper i JavaScript

1. Number (siffror)

2. String (textsträngar)

3. Boolean (booleskt värde; sant/falskt)

4. Array

5. Object

6. Undefined & null

Nummer (number)

• Kan vara heltal (integer) eller decimaltal (float)

• Kan vara negativa eller positiva

• Stödjer de vanliga matematiskta operatorerna

3*5 + 2.5 17.5

115*4 – 4 + 88 / 2 500

Strängar (string)

• En uppsättning av (i princip) vilka tecken som helst

• Skapas med citattecken ” eller apostrofer ’

• Kan läggas hop (konkateneras)

• Ex.”Hello World”’Hello World’’Mister ’ + ”X”

Booleanskt värde (boolean)

• Representerar antingen sant (true) eller falskt (false)

• Används ofta vid jämförelserStörre än > Mindre än <Exakt lika == Inte lika !=

• Flera jämförelser kan kombinerasoch && eller ||

Booleanskt värde - exempel

• 10 > 3 true

• 3 > 10 false

• 5 == 2+3 true

• "ABC" == "ABC” true

• 4 > 3 && "hej" == "då” false

• 4 > 3 || "hej" == "då” true

Variabler

• Ett viktigt koncept är att kunna spara undan värden

• Värden kan lagras i variabler

• Variabler skapasmed nyckelordet var, följt av ett namn

var name; // skapa variabel

name = "Bob"; // tilldela värde

var age = 40; // skapa och tilldela samtidigt

Exempel

var tal1, tal2;

tal1 = 50;

tal2 = 75;

var result = tal1 + tal2;

// Funkar också:

var tal1 = 50, tal2 = 75;

Inmatning/utmatning

• Vi kan lagra värden och göra beräkningar, men hur ska vi hämta datafrån användaren och hur visas resultaten?

• JavaScript har inbyggda funktioner för att:- fråga användaren efter ett värde- visa ett värde i en ruta- skriva ett värde till HTML-dokumentet- läsa och modifiera innehåll i HTML-dokument

Exempel

• // Visa ruta att skriva i och spara

• // i variabeln `svar`:

• var svar;

• svar = prompt("Var god skriv")

• // Visa meddelanderuta med texten

• // ‘Hej och välkommen’:

• alert("Hej och välkommen");

• // Skriv texten ‘Bonustext’ till

• // HTML-dokumentet

• document.write("Bonustext")