Exemple på Tentauppgifter Webbprogrammering

Transkript

1 LUNDS TEKNISKA HÖGSKOLA 1(6) Institutionen för datavetenskap Exemple på Tentauppgifter Webbprogrammering version :36:14+01:00 Tillåtna hjälpmedel: inga. Detta är ett exempel på frågor som kan finnas på en tentamen. Antalet frågor motsvarar inte det som kommer på en tentamen. 1. Betrakta följande JavaScript kod: class Foo { constructor() { this.text = ; tostring() { return this.text; class Bar extends Foo { constructor(text) { super(text); tostring() { return the special text is + super.tostring(); const message = new Bar( EDAF90 ); Rita upp prototypkedjan till objekten message och Bar. I bilden ska det framgå var de olika metoderna och attributen hamnar. 2. Betrakta följande JavaScript kod: const foo = function() { return this ; class Foo { tostring() { return Foo ; const obj = new Foo(); Foo.prototype.foo = foo; console.log( A = + this); console.log( B = + foo()); console.log( C = + obj.foo()); Vad skriver programmet ut? tips: Object.prototype.toString() returnerar [object Object] för vanliga object och [object global] för det globala objektet. 3. När variabler deklareras med var i JavaScript används function scope. Beskriv synligheten för dessa variabler. 4. Vad menas med hoisting i samband med deklarationer i JavaScript. 5. Vad menas med termen responsive design?

2 2(6) 6. Komponenterna i en react application formar ett träd. Förklara hur ett barn skicka data till föräldern. 7. I en singel page web application används ofta en router. Vad är routerns uppgift? 8. I ett meddelandesystem finns en REST server. För att hämta ett meddelande används http-request från Skriv JavaScript kod för att hämta meddelandet med id 42. Skriv ut meddelandet till console.log(); 9. I din applikation finns html-koden <button onclick=mycallback()">. Vad händer internt i webbläsaren när användaren klickar på knappen? Kommer koden i mycallback() att exekveras direkt eller vid en senare tidpunkt? Din förklaring ska innehålla koncepten event och event loop. 10. URLer och URIer används för att identifiera resurser på nätet, t.ex. a) Vad är skillnaden på en URL och en URI? b) En URL kan delas upp i flera delar. Vad representerar de olika delarna? 11. Hur vet du om en http-request lyckas? Utgå från strukturen i http-svaret (protokollnivå). 12. I din webbapplikation kan användaren välja språk. Hur kan du spara användarens val i webbläsaren, så valet finns kvar nästa gång användaren kommer tillbaka till din webbapplikation? 13. Beskriv hur komponenter i en angular applikation kan kommunicera via service -konceptet.

3 3(6) Svar A svaret är för spetsbetyg. Det jag vill se är att du förstår hur this får sitt värde. Att this får olika värden beroende på hur funktionen anropas. För B betraktar jag [object global], [object Object] och undefined som rätt svar. I sloppy mode A = [object global] B = [object global] I strict mode A = [object global] B = undefined In most cases, the value of this is determined by how a function is called. It can t be set by assignment during execution, and it may be different each time the function is called. ES5 introduced the bind() method to set the value of a function s this regardless of how it s called, and ES2015 introduced arrow functions which don t provide their own this binding (it retains the this value of the enclosing lexical context). Out of scope for the course: Note 1, if you run the code in a browser, the global object is called window, giving the output A = [object Window]. Note 2, if you run the code in node.js, you will get (node.js treats the globla object different, each file have their own global): I sloppy mode A = [object Object] B = [object global] I strict mode A = [object Object] B = undefined 3. Alla deklarationer syns i hela funktionen, även utanför det block som de är deklarerade i. Exempel, funktionen skriver ut in if block : function () { if( true ) { var tmp = in if block ; console.log(tmp);

4 4(6) 4. Alla var- och funktions-deklarationer lyfts till början av sitt scope. För var-deklarationer sker initieringen där den ursprungliga deklarationen gjordes (variabeln har värdet undefined fram tills dess. För funktionsdeklarationer function foo()... lyfts både namn och initieringen till början av dess scope. OBS, var bar = function()... är en variabeldeklaration och initieringen lyfts inte. Hoisting innebär att alla namn är synliga i hela scopet. Exempel: function () { var a = a ; if( true ) { var b = b ; var c = c ; function foo() { c = foo ; var bar = function () { c = bar ; Är identisk med: function () { var a = a ; var b; var c; function foo() { c = foo ; var bar; if( true ) { b = b ; c = c ; bar = function () { c = bar ; Om du läser från, eller skriver till, variabler som deklareras med let och const get det ReferenceError: nosuchvariable is not defined. Mer information hittar du t.ex. här: Responsive design är en hemsida som anpassar sig efter de tekniska förutsättningarna, primärt storleken på skärmen. (en app som fungerar väl på dator, läsplatta och telefon) 6. Barnen har ingen referens till föräldrarna. För att skicka data uppåt i trädet måste föräldrarna skicka med en callback-metod i parametrarna (props) till barnen. Barnen kan då anropa den metoden, som kan modifiera tillståndet (t.ex. this.state) i föräldern. Parent: Child: class Parent { constructor() { this.state = {language: ; updateparentlangstate(newlang) { this.setstate({lang: newlang); render() { return <Child onselectlanguage={updateparentstate/> class Child { setlangse() {

5 5(6) this.props.onselectlanguage( se ); render() { return <button type="button" onclick={setlangse>svenska</button>; 7. Routern ansvarar för navigering mellan sidor i appen. Givet en url bestämmer den vilka react/angularkomponenter som ska visas. Routern ansvarar även för att hålla webbläsarens navigerings-historik uppdaterad, så att användaren kannavigera med bak/fram knapparna och historik-menyn i webbläsaren. 8. var url = new URL( ); fetch(url).then(response=> response.text()).then(text => console.log(text)); 9. När användaren klickar på knappen skapas ett click-event. Händelsen vandrar från roten i DOMträdet till källan (<button> och tillbaka till roten (event bubbling and capturing). På vägen upp anropas alla hanterare som prenumererat på denna typ av händelser. onclick=mycallback() i exemplet. mycallback placeras i webbläsarens event-loop (en FIFO-kö) där den får vänta till det blir dess tur att köra. JavaScript-funktioner blir aldrig avbrutna och får alltid fortsätta tills de är klara En URI identifierar en resurs, t.ex. isbn-nummret för en bok. En URL beskriver var resursen finns, t.ex URL = scheme:[//authority]path[?query][#fragment] authority = [userinfo@]host[:port] scheme protokollet, t.ex. http authority serven där resursen finns, d.v.s. användarnamn, DNS/IP-nummer och port path identifierare för resursen (traditionellt är det en sökvägen i filsystemet) query extra parametrar/information, t.ex. filter vid sökning?name=per fragment identifierar en del av resursen, t.ex. en rubrik på en html-sida. 11. Första raden i svaret består av tre delar: version, statuskod och status text. Alla statuskoder som börjar på 2 (2xx) är ok. Exempel: HTTP/ OK HTTP/ Not Found 12. Spara Konfigurationen i window.localstorage. window.localstorage.setitem("config", this.config); this.config = JSON.parse(window.localStorage.getItem("config")); 13. Services i angular är objekt som flera komponenter har referenser till. Ofta är en service ett singelton object, d.v.s. det finns bara en instans i hela applikationen. En komponent får tillgång till en

6 6(6) service genom att dess konstruktor har en parameter av servicens typ. Kommunikationen från en service till en komponent sker ofta via Observables, så komponenten uppdateras när ny data finns selector: app-my-component, templateurl:./my.component.html, styleurls: [./my.component.css ] ) export class MyComponent implements OnInit { constructor(private myservice: MyService) { oninit() { this.myservice.getdata().subscribe( data => dostuffwithdata(data) ); onsubmit(data) { this.myservice.newdata(data);