Föreläsning i webbdesign Introduk+on +ll programmering i JavaScript Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se
Språk Naturliga språk Mänsklig kommunika+on T.ex. Svenska, engelska, Formella språk Beskrivningsspråk Strukturering, ukormning av presenta+on T.ex. HTML, CSS, XML, Programspråk Instruk+oner för aq skapa funk+onalitet och interak+vitet mellan användare och program T.ex. JavaScript, Ac+onScript, PHP, Java, C++, Ada, 2
Exempel Program för aq dricka kaffe Program: sekvens av instruk;oner 1. Häll kaffe i en kopp 2. Drick kaffe ur koppen 3. Slut 3 Bilder från freedigitalphotos.net
Flödesschema Start Program för att dricka kaffe! Sekvens av kommandon/instruk+oner (programsatser) Häll kaffe i en kopp Drick en mun kaffe ur koppen 1. Häll kaffe i en kopp Svenska 2. Upprepa så länge du vill ha mer kaffe: 2a. Drick en mun kaffe ur koppen 2b. Om koppen är tom, så lämna sekvensen 3. Slut Koppen tom? Nej Ja kopp = 10; ukör så länge (merkaffe) { kopp = kopp - 1; om (kopp = 0) avbryt; } pseudokod Ja Nej Vill ha kaffe? Slut var kopp = 10; JavaScript while (confirm("jag vill ha mer kaffe")) { kopp = kopp - 1; if (kopp == 0) break; } 4
Programspråk Gramma+k, språkets regler Lexikala enheter (vokabulär) nyckelord iden+fierare operatorer och andra tecken var kopp = 10;" while (confirm("jag vill ha mer kaffe")) {" "kopp = kopp - 1;" "if (kopp == 0) break;" }" Syntax sammansäqning +ll satser (meningar), regler för hur lexikala enheter får säqas samman Seman+k satsernas meningsfullhet (betydelse) Värdet 10 sparas i variabeln kopp 5
Programspråk som ger funk+onalitet på webbsidor JavaScript Infogas i HTML- koden script- taggar Körs i webbläsaren UKörs på klientsidan ej på serversidan HTML & JavaScript Klient Server 6 Bilder från freedigitalphotos.net
Script- taggen <script type="text/javascript"> JavaScript- kod </script> <script type="text/javascript" src="script.js"></script> Placeras var man vill i HTML- koden Brukar ligga i head- delen UKörs då sidan läses in eller då koden anropas (vid användning av funk+oner) Läggs ibland i body- delen, om man vill aq koden ska uköras där ex1" JavaScript- koden kan ligga i en separat fil som man refererar +ll i script- taggen ex2" 7
Variabler Värden (data) i program sparas i variabler En variabel är en behållare för aq spara eq värde, så aq det senare kan användas En variabel är alltså eq litet minne i programmet Variablerna ges namn, så aq man kan referera +ll dem Använd endast bokstäverna a- z, siffror och _ Får ej börja med en siffra 23 age = 23; // Variabeln age får värdet 23 age 23 age + 5 // Värdet 23 används i beräkningen 8
Programsats Kommando/instruk+on för aq uköra något Jämför med meningar i naturliga språk Avslutas i JavaScript med semikolon ; Exempel: Tilldelningssats var x = 2 * a; UQryck Beräkning av något Programsatser och udryck Exempel: Aritme+ska uqyck 2*a year+12*month 3/(x- 2) ex3" McGrath, M. (2009) JavaScript in easy steps, fourth edi;on, In Easy Steps, s.24 9
Datatyp Data kan anges på olika form Data Exempel på några vanliga typer: String (textsträng): "En text" 'En annan text' Number: Integer (heltal): 123-48 Float (flyqal): 3.14-8.9675 2E- 3 (2E- 3 = 2*10-3 ) Boolesk: true false Object: Kan innehålla flera olika värden, t.ex. eq datum Speciella värden: Null: ingen+ng, utan specificerad typ Undefined: en variabel som inte fåq något värde NaN (Not a Number): resultat då man försöker uköra en aritme+sk opera+on på värden som inte är tal, t.ex. 2*"text" McGrath, M. (2009) JavaScript in easy steps, fourth edi;on, In Easy Steps, s.16 10
Funk;on Programkoden kan delas in i funk+oner En funk+on ges eq namn (id) Funk+onen kan anropas från en annan funk+on då webbsidan laddats från en tagg i HTML- koden t.ex. en knapp som användaren kan klicka på ex4" Fördelar med funk+oner Programmet delas upp i mindre delar Det blir då mer strukturerat och överskådligt En funk+on kan anropas från flera gånger och från flera ställen 11
Indata och utdata Indata från användaren kan t.ex. vara klick på en knapp (eller annan tagg) text (eller tal) som skrivs i eq texkält i eq formulär Utdata från programmet kan t.ex. vara eq meddelande i en popup- ruta innehållet i en tagg förändras ex5" 12
Sy e med språket: Scriptspråk för aq göra webbsidor mer levande och dynamiska JavaScript- historik Utveckling Netscape (1995) LiveScript JavaScript Utvecklade språket fram +ll version 1.3 (1.4 för program på servern) Microso (1996) JScript (Vbscript) ECMA European Computer Manufacturers Associa+on (1997) ECMAScript - ECMA- 262 (= JavaScript 1.3) JavaScript 1.5 (2000) JavaScript 1.6 (2005) JavaScript 1.7 (2006) JavaScript 1.8 (2008) JavaScript 1.8.5 (2010) Wikipedia (2012) JavaScript, Wikipedia, +llgänglig: hqp://en.wikipedia.org/wiki/javascript#versions [2012-10- 25] 13
Dynamisk HTML (DHTML) Dynamic HTML is a term used to describe HTML pages with dynamic content. CSS is one of three components in dynamic HTML; the other two are HTML itself and JavaScript (which is being standardized under the name EcmaScript). The three components are glued together with DOM, the Document Object Model. HTML CSS DOM Script Bert Bos(2012) Web Style Sheets Home Page, W3C, +llgänglig: hqp://www.w3.org/style/ [2012-10- 25] 14
Exempel på dynamiskt innehåll Förändrat innehåll Datum och +d visas på sidan förändras då man kommer +ll sidan eller kon+nuerligt En länks des+na+on beror på vad användaren valt i eq formulär Visuell feedback Då användaren för in markören över en knapp byter den utseende Då användaren klickar på olika miniatyrbilder förstoras de Formulär Användaren gör val och fyller i uppgi er som sedan kan resultera i någon beräkning (t.ex. en lånekalkyl på en banks webbsida) 15