Informationssystem 1-30

Frelsning
Grundlggande Programmering i JavaScript 1
Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter.
- Eric Raymond

Kristian Ekberg

Viktiga begrepp fr (distribuerade) informationssystem

Ett distribuerat informationssystem r en uppsttning datorer som uppfattas som ett system av dess anvndare.
www.it.uu.se

information

www tjnst

data

anvndare

klient

server

data bas

ntverk

Innehll
Ngra praktiska saker Repetition
Repetition frn HTML labbarna Repetition frn Excel labbarna

Kort historia om sprket JavaScript Grundlggande programmering

Programsekvens Delprogram, funktion, procedur

Genomgng programmeringssprk
Ngra punkter att titta p Hello World! program Lab 10

Ngra praktiska saker

Temperaturtagningen
Ligger ute t om onsdag Helt anonymt och frivilligt deltagande !!

Vi r tacksamma fr din feedback !

Vi behver veta om det finns ngot som du anser inte fungerar s bra Om vi inte hr ngot, s tror vi ju allt r ok

Vi r tacksamma fr konstruktiv feedback !

Om du tycker ngot r dligt, hjlp oss grna med vad och grna hur man skulle kunna gra istllet

Ngra praktiska saker

Inlmningsuppgift 1
12 begrda kompletteringar (89% klara)

Inlmningsuppgift 2
34 begrda kompletteringar (69% klara)

Inlmningsuppgift 3
Deadline idag Rttning pbrjas snart
Uppskattning 2011-11-28: 110-112 aktiva studenter Uppskattning 2011-11-28: 110-112 aktiva studenter

Ngra praktiska saker

Arbete med Inlmningsuppgift schemalggs inte !

Motsvarar hemtenta Studentens eget ansvar Studentens egen tid Laborationssalar kan anvndas om plats finns

Inlmningsuppgifter
Frutstter att alla laborationerna har gjorts fullstndigt! Det r ganska ofta som det viktigaste r i slutet p en laboration, pga pedagogiska orsaker

Kort repetition frn HTML labbarna

Sprket HTML (Hypertext Markup Language) HTML dokument struktur (head + body) Tag, attribut, taggar i taggar Bilder, tabeller, lnkar, internlnkar Arbetsstt (Editera, Validera, Publicera, Surfa) Validering (HTML Transitional (loose), HTML Strict) Koppling mellan formatmallar i ordbehandlare och tag i HTML Indentering vid kodning/programmering HTML forms konstruktion: taggar, interaktionsmjligheter i HTML HTML forms: POST / GET tekniker fr att skicka data Klient-server kommunikation: variabler, vrden, namngivning HTML & CSS: kopplingar Frndra utseende med CSS Mer avancerad CSS: box-modellen, positionering, webbplats Inlmningsuppgift 3: gra en helt egen webbsite frn brjan

Ngra praktiska saker

Tentamen
Lnk finns p kursen Instuderingsrd finns p lnkad sida Tentamen omfattar hstens frelsningar och material angivet p lnkad sida Frgor?

Kort repetition frn Excel labbarna

Kommer ni ihg de hr?

Repetition frn Excel labbarna centrala grundlggande programmeringsbegrepp!

Variabel (Excel cell)
Behllare som kan innehlla data Data kan vara tom eller ndras Behllaren har ett namn s man kan utlsa/ndra vrdet B3 innehller vrdet 7820 B4 innehller funktionen = B3 B4

Repetition frn Excel labbarna centrala grundlggande programmeringsbegrepp!

Funktion (= formel plus de inbyggda funktionerna i Excel)
returnerar ett (vanligast) vrde man skickar in vrde(n) till funktionen (argument) anvnds fr att organisera problemet i mindre delar Exempel SUM(), SUMMA() = B3 B4 vrdet returneras i cellen

Repetition frn Excel labbarna centrala grundlggande programmeringsbegrepp!

Villkorssats (OM i Excel)
IF ( villkor; grs_om_sant; grs_om_falskt )

Repetition frn Excel labbarna centrala grundlggande programmeringsbegrepp!

Boolean (Logiska testet i Excel)
Ett booleskt vrde kan antingen vara sant eller falskt aldrig ingenting

Grundlggande programmering

Grundlggande terminologi och begrepp Grundlggande konstruktioner Grundlggande funktionalitet Allts: vi lr oss en grund att st p infr kommande kursmoment och pbyggnadskurser Sprket r JavaScript som lmpar sig bra fr undervisning i grundlggande programmering
Okomplicerat sprk Okomplicerad utvecklingsmilj Pminner syntaxmssigt om Java, C#, C, C++,

Grundlggande programmering

r programmering svrt?
Nej, inte speciellt. Vem som helst kan lra sig programmera. Fast det underlttar om man r intresserad och tycker det r kul ! Man fr inte vara rdd att gra fel. Tvrtom: inget gr snder, det r genom att prva sig fram som man hittar lsningar och lr sig! Alla programmerare gr fel, det ingr i jobbet. Det r drfr man arbetar med testning

Grundlggande programmering Tv stt att se programmering

Deklarativ
Beskrivande, man talar om hur saker ska vara Statiskt
Tid finns inte

Exempel: sprken HTML, CSS, SQL, Prolog,

http://en.wikipedia.org/wiki/Markup_language se sektion In Descriptive markup

Imperativ
Genomfrande, man talar om hur saker ska gras Dynamiskt
Tid finns

Exempel: sprken C, Java, C#, Basic, JavaScript etc

Grundlggande programmering Tv stt att se programmering

Bda synstten behvs vid konstruktion av informationssystem och gr igen i datalogin

Webbteknik (klient) Webbteknik (klient) Statiskt: HTML Statiskt: HTML Dynamiskt: JavaScript Dynamiskt: JavaScript Objektorientering Objektorientering Statiskt: Objektet med attribut Statiskt: Objektet med attribut Dynamiskt: Objektets metoder Dynamiskt: Objektets metoder Funktion iiJavaScript Funktion JavaScript Statiskt: Deklaration av funktionen Statiskt: Deklaration av funktionen Dynamiskt: Anvndande (anrop) Dynamiskt: Anvndande (anrop) UML UML Statiskt: klassdiagram Statiskt: klassdiagram Dynamiskt: sekvensdiagram Dynamiskt: sekvensdiagram

(Jfr bilkp) (Jfr bilkp) Statiskt: frg, form, last etc Statiskt: frg, form, last etc Dynamiskt: provkrning Dynamiskt: provkrning

JavaScript historia
JavaScript is a dialect of the ECMAScript standard and is characterized as a dynamic, weakly typed, prototype-based language with first-class functions. JavaScript was influenced by many languages and was designed to look like Java, but to be easier for nonprogrammers to work with.
http://en.wikipedia.org/wiki/JavaScript

Utvecklat av Brendan Eich till Netscapes webblsare, frsta release 1995 Microsofts version kallas JScript, frsta release 1996 Iochmed webblsarnas spridning har sprket ftt en enorm spridning! Utvecklats lngsamt: p 10 r har det knappt ndrats alls (!) JavaScript frvaltas idag av Mozilla https://developer.mozilla.org/en/JavaScript ECMAScript frvaltas av Ecma International (non profit, Geneva)

JavaScript Revival! Language revival of an extinct language Trend (?): JavaScript r just nu p vg att bli inne frn att ha varit ute Pgr just nu mycket tack vare Douglas Crockford Han stter JavaScript i fokus, dissekerar sprket, och arbetar ven med att frbttra det. Inte s mnga som vet speciellt mycket om JavaScript.

JavaScript: The Good Parts Douglas Crockford Google TechTalks (2009)

http://www.youtube.com/watch?v=hQVTIJBZook

m St

ts all r me

e int

! elt h

frn Concepts of Programming Languages Sebesta (2009)

, ild b ad ttre r ifie er b od m M m st

JavaScript

JavaScript tillmpning JavaScript r inte samma sak som Java !!

syntaxen r liknande men det r olika sprk

JavaScript r ett programsprk fr webben

Finns redan i alla webblsare sedan 15 r tillbaka Anvnds ofta fr att lgga till beteende (dynamik) p en statisk webbsida, kompletterar HTML & CSS Utnyttjar frdiga funktioner fr att kunna ndra en webbsida som lsts upp i webblsaren (t ex DOM modellen) I denna kursen anvnder vi det som programmeringssprket.

I denna modul 4 i kursen fram till jul

Vi anvnder JavaScript till att lra oss grunderna i (imperativ) programmering Eftersom sprket r syntaxmssigt likt Java och C# s kommer ni att kunna teranvnda en hel del kunskap

Grundlggande programmering - vilket programmeringssprk r bst? Sprk kommer och gr, men kunskap bestr
Olika sprk r bra fr olika tillmpningar Det r (tyvrr) mode i programmeringssprk och fort gr det! Redan etablerade (gamla) sprk: C, C++, Java, C#, JavaScript JavaScript r lite ny-modernt igen just nu vi r inne! Sk sjlv info p Internet om populra programmeringssprk (hr r en lnk)

En riktigt duktig programmerare kan programmera vad som helst i vilket sprk som helst, rtt & snabbt
Lr sig snabbt ett nytt sprk Gr en sprkoberoende lsning frst Implementerar det sen i sprket Passar grna p att bygga om/frbttra sprket samtidigt

Grundlggande programmering var ska vi brja?

Frn brjan naturligtvis vi brjar med programsekvens !

Programsekvens

Javascript r ett interpreterande sprk

Det betyder att det finns en tolk (interpretator) som tolkar kllkoden och sedan utfr det som den kommit fram till att kllkoden beskriver. Som en slags motor. Detta kallas att programmet exekveras (krs)

Interpretatorn tolkar uppifrn och ner och frn vnster till hger, precis som vi lser
Men det finns undantag pga prioritet (terkommer vi till senare)

I vrt fall anvnder vi webblsarens interpretator

Allts: vi kr vra Javascript program i webblsaren

Utvecklingsmilj

Ni kommer att bygga er egen utvecklingsmilj fr JavaScript programmering i lab 10

Kllkodsfil Programmeras i (text-) editor

Start sida Exekverar kllkoden i webblsaren

Programsekvens

Kllkod beskriver en sekvens (ordning i tiden) av det som programmet ska genomfra (jfr recept) Kllkod kan skrivas efter varandra p samma rad
kllkod; kllkod; kllkod; kllkod; kllkod; kllkod; tolkning

Men det vanligaste r att skriva den i programrader

kllkod; kllkod; kllkod; kllkod; kllkod; kllkod;

Observera! Observera!
tolkning

En kllkodsrad i iJavaScript mste En kllkodsrad JavaScript mste avslutas med ett semikolon ;; !!! avslutas med ett semikolon !!! (jfr slut-tag i iHTML) (jfr slut-tag HTML)

Programsekvens

Sekvensen kan styras/ndras med programkonstruktioner som

Selektion (val) Iteration (loop) Funktioner (metoder) Undantag (try/catch, error) Hopp (labels & goto i andra sprk)

kllkod; kllkod; tolkning kllkod; kllkod; gr 10 gnger { grs kllkod; kllkod; 10 ggr } kllkod; kllkod; kllkod; kllkod; om (a > 0) a=0 kllkod; kllkod; kllkod; kllkod; kllkod; kllkod;

a=5 kllkod; kllkod;

Man kan tala om programgrenar vi terkommer till detta senare

lite som ett spr, lite som ett spr, med vxlar, tnk med vxlar, tnk modelljrnvg ... modelljrnvg ...

Programsekvens

Fel (bug)
Syntaxfel upptcks ofta innan programmet startas Interpretatorn kan ibland arbeta (tolka/utfra) tills den stter p ett programfel D stannar den (och i bsta fall rapporterar felet) All kllkod innan felet upptcktes har utfrts All kllkod efter felet kommer ej att utfras Detta betyder att vi kan kllkod; kllkod; kra kllkod som kllkod; innehller fel, fram till felet kllkod; Fel! Stopp ! klXXZd; Sedan stannar exekveringen kllkod; Blir ej Den felaktiga kllkoden kllkod; tolkat/utfrt kllkod; utfrs ej

Programsekvens

Vi kollar !!
(Demonstration av Hello World! program)

Funktion Krt barn har mnga namn

Delprogram kan ocks kallas metod, procedur, (sub)rutin, funktion men i JavaScript heter sprkkonstruktionen function .

Det mest centrala begreppet i modern programmering

Moderna programsprk som Java och C# bestr av enorma klassbibliotek och programmeringen handlar till stor del om att kunna hantera de befintliga objekten och deras funktioner/metoder.

Grunden i Funktionell nedbrytning

Att dela upp ett problem i delproblem som lses var fr sig Verktyg fr abstraktion vid programmering En metod kan anropa flera andra metoder men detta terkommer vi till

Delprogram (man sger oftast funktioner) Delprogram modellerar en aktivitet

ngot utfrs

Det finns olika sorters delprogram, exempel

gOchHandlaMjlk gOchHandlaMjlk taMed: pengar taMed: pengar retur: mjlk retur: mjlk Funktion gUtMedSoporna gUtMedSoporna taMed: sopor taMed: sopor retur: retur: Procedur

Ett delprogram kan ses som en tjnst

Kan behva indata fr att kunna utfra tjnsten Kan returnera ett resultat av utfrande av tjnsten (en retur) Kan ibland bara utfra nt (ingen indata och/eller ingen retur) Kan g fel ibland, tjnsten utfrs inte eller blir felaktigt utfrd

Funktion vs Procedur I denna kursen anvnder vi fljande distinktioner Funktion

utfr ett arbete och returnerar alltid ett vrde

Procedur
utfr ett arbete och returnerar inget vrde

Funktion Funktion r synonymt med avbildning Kommer frn matematiken, entydig definition av vrdet utifrn en eller flera oberoende variabler
Exempel:
Motsvarar deklaration i programmering

f(x) = x2 f(1) = 1 f(2) = 4 f(3) = 9 f(4) = 16

=xx

multiplicera x med x
Anvndning av funktionen motsvarar anrop i programmering

Man definierar hur ens funktion fungerar och man kan skicka in olika vrden i den och d antar funktionen olika vrden beroende p det man skickat in i den

Funktion Vi tittar p hur man deklarerar en funktion i JavaScript

hr ska namnet st hr talar man om vad som kan skickas in Parametrar

Hur man anropar funktionen huvud kropp Vad funktionen gr

function ( ) function ( ) { { return ; return ; } }

hr anger man vad funktionen ska returnera

Funktion Nu bygger v och anropar funktionen kvadrat

Vi talar om vad funktionen ska heta och hur den ska fungera deklaration parameter

function kvadrat(x) function kvadrat(x) { { return x * x; return x * x; } } kvadrat(1); kvadrat(1); kvadrat(2); kvadrat(2); kvadrat(3); kvadrat(3); kvadrat(4); kvadrat(4); argument

Returnera det x som vi skickar in multiplicerat med sig sjlv ger vrdet 1 ger vrdet 4 ger vrdet 9 ger vrdet 16

4 st anrop (anvnder funktionen) Vi kr funktionen 4 gnger och fr tillbaka resultaten

Funktion Kllkoden i en funktion krs enbart nr funktionen anropas Drfr kan vi lgga vr deklaration av funktionen frst i kllkoden Interpretatorn hoppar ver funktionsdeklarationen, men vet att funktionen finns och nr vi anropar den s krs den. function kvadrat(x) function kvadrat(x) Men nr vi kr s ser { { vi inget resultat return x * x; return x * x; } } vi mste skriva ut resultaten ocks !
kvadrat(1); kvadrat(1); kvadrat(2); kvadrat(2); kvadrat(3); kvadrat(3); kvadrat(4); kvadrat(4);

Utmatning Vi kan anvnda en frdig funktion i webblsaren som heter alert() och som ppnar ett litet info fnster Eller vi kan anvnda funktionen document.writeln() Do try this at home! (testa sjlv)
function kvadrat(x) function kvadrat(x) { { return x * x; return x * x; } } document.writeln( kvadrat(1) ); document.writeln( kvadrat(1) ); document.writeln( kvadrat(2) ); document.writeln( kvadrat(2) ); document.writeln( kvadrat(3) ); document.writeln( kvadrat(3) ); document.writeln( kvadrat(4) ); document.writeln( kvadrat(4) ); Vi skickar in resultatet frn kvadrat i funktionen document.writeln function kvadrat(x) function kvadrat(x) { { return x * x; return x * x; } } alert( kvadrat(1) ); alert( kvadrat(1) ); alert( kvadrat(2) ); alert( kvadrat(2) ); alert( kvadrat(3) ); alert( kvadrat(3) ); alert( kvadrat(4) ); alert( kvadrat(4) ); Vi skickar in resultatet frn kvadrat i funktionen alert

Programsekvens

Vi kollar !!
(Demonstration av anrop p kvadrat,utmatning, samt anvndning av sprutskrifter (eng trace) i funktionen och i programmet)

Delprogram (funktionsanrop)
Programsekvensen kan styras mha funktionsanrop Efter att ett funktionsanrop r klart fortstter interpretatorn med nsta instruktion efter anropet huvudprogram huvudprogram kllkod; exekvering kllkod; kllkod; kllkod; anrop a; kllkod; kllkod; kllkod; kllkod; anrop b; kllkod; kllkod; kllkod; kllkod; delprogram a delprogram a kllkod; anrop c; kllkod; anrop d; kllkod; delprogram c delprogram c kllkod; kllkod; kllkod; kllkod; kllkod;

delprogram b delprogram b kllkod; kllkod; kllkod;

delprogram d delprogram d kllkod; kllkod; kllkod;

Parameter vs Argument Parametrar r de variabler som anges i deklarationen av funktionens huvud (anvnds fr att kunna skicka in vrde)
En parameter fungerar som en variabel enbart i funktionens kropp

Argument r de vrden som skickas till funktionen vid anropet

Argument kan vara vrden eller variabler med vrden i
parameter function kvadrat(x) function kvadrat(x) { { return x * x; return x * x; } } var y = 2; var y = 2; kvadrat(1); kvadrat(1); kvadrat(y); kvadrat(y); argument

Allts:
parametern fr sitt vrde frn argumentet vid anropet, dvs nr funktionen krs blir
parameter = argument

anvnds som variabel vid deklarationen av funktionens kropp

Programsekvens exempel Hur mnga gnger krs funktionen kvadrat i exemplet?

function kvadrat(x) function kvadrat(x) { { return x * x; return x * x; } } var y = 2; var y = 2; kvadrat(1); kvadrat(1); kvadrat(y); kvadrat(y);

Det ska vi ta reda p !!

versiktlig genomgng av ett programmeringssprk

(En lista av mina egna kontrollpunkter )
Grundlggande datatyper
Konverteringsfunktioner

Reserverade ord & kommentarer Operatorer och prioritet Inbyggda stdfunktioner (bibliotek)
Strngoperationer Matematik funktioner Abstrakta datatyper? Typkontroller

Sprkkonstruktioner (syntax)
Iterationer Selektioner Hantering av undantag och fel Deklaration och anrop av funktioner Konventioner namngivning

Lab 10 ! Lab 10 !

Objektorientering? Hello World! program (in/out) Minneshantering

scope regler bindningsmodeller

Hello World!

Klassiskt det frsta programmet i ett nytt sprk

Frsta dokumenterade Hello World! programmet frn en programmeringsbok i C frn mitten p 70-talet
http://en.wikipedia.org/wiki/Hello_world_program

int main() int main() { { printf("hello, world"); printf("hello, world"); return 0; return 0; } }

Hello World! Utmrkt som frsta program fr man fr ordning p Utvecklingsmiljn (editor, ev kompilator, ev path variabler etc etc) Utmatningsmjligheter och syntax fr det Man kan enkelt bygga p / bygga om detta enkla programmet och testa lite fler saker som strngoperationer, etc etc och s r man igng!

Kunskap: Hela Internet r fullt med Hello World! program i alla upptnkliga sprk, sk sk sk !!

Variabler i JavaScript

Vad skrivs ut?

var a = 1; var a = 1; var b = 2; var b = 2; var c = a + b; var c = a + b; document.writeln(c); document.writeln(c);

Variabler i JavaScript (Strngkonkatenering)

Vad skrivs ut?

var a = Hello; var a = Hello; var b = World!; var b = World!; var c = a + b; var c = a + b; document.writeln(c); document.writeln(c);

Repetition
Ngra praktiska saker Repetition
Repetition frn HTML labbarna Repetition frn Excel labbarna

Kort historia om sprket JavaScript Grundlggande programmering

Programsekvens Delprogram, funktion, procedur

Genomgng programmeringssprk
Ngra punkter att titta p Hello World! program Lab 10

Tack fr idag!