Fortsättningskurs Webbklientprogrammering

Transkript

1 Tentamen, Fortsättningskurs Webbklientprogrammering (40 YH-poäng) Plats: Övningstenta Tid: Övningstenta Tillåtna hjälpmedel: Papper, penna, suddgummi, linjal. Ej tillåtna hjälpmedel: Datorer, mobiltelefoner, surfplattor, miniräknare, böcker, anteckningar, kompendier etc. Max poäng: 100 poäng Betygsgränser Godkänt: 55 poäng, Väl godkänt: 75 poäng Obs! För att betyget Väl godkänt ska kunna erhållas måste du besvara de öppna frågorna och här få minst en tredjedel av maxpoäng per öppen fråga. Notera även att ett godkänt-betyg på gruppinlämningen krävs för att få ett betyg för hela delkursen. Examinator: Thomas Frank, NodeHill AB Sida 1 av 9

2 Ditt namn: Läs igenom frågorna på följande sidor och välj svarsalternativ. FYLL I DITT NAMN (!) och kryssa i dina svar på denna sida. (Mer än ett ikryssat svar per fråga ger 0 poäng på frågan.) Lämna ENDAST in denna sida! MVC Fråga 1 a b c d Fråga 2 a b c d Fråga 3 a b c d Fråga 4 a b c d Fråga 5 a b c d Fråga 6 a b c d Bootstrap Fråga 19 a b c d Fråga 20 a b c d Fråga 21 a b c d Fråga 22 a b c d Fråga 23 a b c d Fråga 24 a b c d Angular.js Fråga 7 a b c d Fråga 8 a b c d Fråga 9 a b c d Fråga 10 a b c d Fråga 11 a b c d Fråga 12 a b c d Övrigt Fråga 25 a b c d Fråga 26 a b c d Fråga 27 a b c d Fråga 28 a b c d Fråga 29 a b c d Fråga 30 a b c d Mera om Angular.js Fråga 13 a b c d Fråga 14 a b c d Fråga 15 a b c d Fråga 16 a b c d Fråga 17 a b c d Fråga 18 a b c d Sida 2 av 9

3 MVC Fråga 1 Fråga 2 Vad betyder MVC? Vad finns i modellen (enligt MVC)? a) Model View Configure b) Model View Controller c) MongoDB Vysiwyg CSS d) Model Value Cascade a) Alltid jquery-biblioteket. b) Användargränssnittet populerat med data. c) Programlogik som binder ihop vyer och controllers. d) Datalagring och datamodeller. Fråga 3 Fråga 4 Vad finns i en vy (enligt MVC)? Vad finns i en controller (enligt MVC)? a) Användargränssnittet populerat med data. b) Alltid jquery-biblioteket. c) Programlogik som binder ihop controllers och modeller. d) Datalagring och datamodeller. a) Datalagring och datamodeller. b) Programlogik som binder ihop ihop vyer och modeller. c) Alltid jquery-biblioteket. d) Användargränssnittet populerat med data. Fråga 5 MVC gör det lättare att a) Att slippa göra ändringar i användargränssnittet/presentationslagret när datamodellen ändras. b) Att slippa göra ändringar i koden när den är illa skriven. c) Att mobilanpassa applikationer. d) Att sätta upp en bra databasmodell. Fråga 6 Vilket av följande JavaScript-bibliotek/ramverk är anpassat för att skriva kod enligt MVC-principer? a) jquery b) Bootstrap.js c) Angular.js d) jquery UI Sida 3 av 9

4 Angular.js Fråga 7 Vilken av följande är inte ett namn på inbyggt Angular-directive? a) ng-repeat b) ng-show c) ng-query d) ng-hide Fråga 8 ngresource är ett tilläggsbibliotek till Angular.js som underlättar: a) Kommunikation med en REST-api. b) Hantering av användarinput. c) Animering av HTML-element. d) Omvandling av LESS till CSS. Fråga 9 Variabeln $scope i Angular.js används för att dela data mellan... a)...en controller och en vy/template. b)...flera användare. c)...en databas och ett REST-api. d)...två variabler. Fråga 10 Det inbyggda direktivet ng-model i Angular.js andvänds för att dela användarinput mellan... a)...två variabler. b)...en databas och ett REST-api. c)...flera användare. d)...en controller och en vy/template. Fråga 11 I vilken del av ett egenskrivet directive bör du lägga kod som använder sig av jquery? a) Controller. b) Det spelar ingen roll. c) Link. d) Template. Fråga 12 ng-repeat används för att: a) Kopiera JavaScript-kod automatiskt. b) Loopa/repetera data i en vy/template. c) Fråga användaren om han vill repetera en inmatning. d) Loopa igenom all data i databasen. Sida 4 av 9

5 Mera om Angular.js Fråga 13 Vad är det för fördel med att skriva ett eget directive jämfört med att bara använda "råa" templates och controllers? a) Det är lättare att återanvända. b) Det kräver mindre CPU-kraft. c) Man kan inte använda ng-repeat annars. d) Syntaxen är mindre komplicerad. Fråga 14 Routing i Angular.js innebär att: a) Koppla ihop en template med en databas. b) Lägga in ett kart-direktiv i applikationen som kan visa närmaste färdväg till ett mål. c) Koppla olika CSS till olika templates (och eventuellt även kompilera LESS samtidigt). d) Koppla olika URL:er till olika templates (och eventuellt även till olika controllers). Fråga 15 För att få en controller att lyssna på ändringar i en vy kan man använda sig av metoden: a) $scope.$timeout b) $scope.$wait c) $scope.$watch d) $scope.$listen Fråga 16 Om man använder html5mode i Angular.js så: a) Ser man till att <!DOCTYPE html> alltid skrivs in automatiskt i HTML-koden. b) Laddas alltid hela webbsidan om när man går till den via en länk. c) Laddas inte hela webbsidan om om man går till den via en länk. d) Varnar Angular.js om man skriver templatekod som inte följer HTML5-standarden. Fråga 17 Dependency injection innebär att: a) Angular.js injicerar beroenden i dina filtreringar. b) Angular.js injicerar variabler i en template. c) Du berättar för Angular.js vilka olika objekt du vill ladda från disk. d) Du berättar för Angular.js vilka olika objekt du vill att systemet skickar som inargument till en funktion du skriver. Fråga 18 Om man använder jquery tillsammans med Angular.js kan man nå jquery via aliaset: a) angular.$ b) angular.element c) angular.jquery d) angular.jqlite Sida 5 av 9

6 Bootstrap Fråga 19 Bootstrap är ett CSS och JS-bibliotek som underlättar responsiv design. Responsiv design innebär att: a) Att man tar ansvar för sin design och inte slarvar med den. b) Att all CSS måste skrivas som LESS och sedan kompileras. c) Layouten anpassar sig på ett bra sätt (t.ex. genom att innehåll flödar om) efter vilken skärmyta användaren har. d) Att helt olika HTML och CSS används för mobiler respektive datorer. Fråga 20 Bootstrap använder sig av ett grid-system som kan anpassas till olika skärmstorlekar. Dessa storlekar kallas? a) 1, 2, 3, 4 b) sm, md, lg, xl c) sm, lg, xl, xxl d) xs, sm, md, lg Fråga 21 I Bootstrap måste en "row" finnas vara omgärdad av (finnas inuti) en Fråga 22 Vilken av följande är inte en Bootstrap component? a) well b) column c) container d) jumbotron a) panel b) well c) column d) jumbotron Fråga 23 Hur lägger du enklast till en Bootstrap component i din webbapplikation? a) Kopierar HTML-kod från Bootstrapdokumentationens exempel. b) Laddar hem ett nytt Bootstrap-tema. c) Skriver namnet på komponenten som ett data-attribut i valfri HTML-tagg. d) Använder JavaScript-biblioteket jquery UI. Fråga 24 Ett enkelt sätt att ändra på Bootstraps utseende (dvs. skapa ett eget tema) är att ändra på värdena man hittar i Bootstraps källkod i filen a) wells.less b) utilities.less c) variables.less d) theme.less Sida 6 av 9

7 Övrigt Fråga 25 Vad är jquery UI? Fråga 26 Modernizr är ett JavaScript-bibliotek som: a) En variant av jquery som går att använda tillsammans med Node.js för att skapa RESTapi:er. b) Ett tilläggsbibliotek till jquery som innehåller widgets, "interactions" och effekter. c) Ett MVC-biblotek som kan användas tillsammans med jquery. d) Ett bibliotek som underlättar spelutveckling med jquery. a) Moderniserar/uppdaterar gammal HTML-kod så att den följer HTML5-standard. b) Kan användas för att kontrollera vilka features en webbläsare stödjer. c) Gör Bootstrap snabbare genom att använda grafikkortet för rendering. d) Gör Angular.js snabbare genom att accelerera two-way binding. Fråga 27 Vad är en widget? Fråga 28 Varför bör webbsidor följa HTML-standarden? a) En algoritm som underlättar uppritningen av pajdiagram. b) Ett valideringssystem för användarinmatning i modala fönster. Ordet kommer från "window get". c) En "miniapplikation" inuti en större applikation - t.ex. en kalender, vädervisare, karta eller liknande. Ordet kommer från "window gadget". d) En speciell event som triggas när användare flyttar fokus till en delflnster. Ordet kommer från "window target". a) För att CSS-standarden är föråldrad. b) För att Sublime Text annars buggar ur. c) De visas då upp korrekt i alla moderna webbläsare. d) För att JavaScript annars inte kan laddas in. Fråga 29 Vilket av följande är INTE ett namn på en standard HTML5-tagg? Fråga 30 Vilket av följande bibliotek/ramverk/miljöer är äldst? a) article b) header c) footer d) file a) jquery UI b) Bootstrap c) Node.js d) Angular.js Sida 7 av 9

8 Del 2, öppna svar Instruktioner: Läs igenom frågorna på följande sidor och svara på dem på separata skrivpapper. Obs! Märk varje pappersark noga med: Ditt namn Xxx Yyy. Frågans nummer, öppen fråga X. Markera även tydligt var svar på olika delfrågor börjar! När du är klar med samtliga öppna frågor (eller inte hinner skriva mer) sidnumrerar du dina skrivna sidor enligt sida X av Y. Detta minimerar risken att något du har skrivit förväxlas eller tappas bort! Fråga 1: MVC och Angular.js (1 totalt) a) Vad innebär MVC (förklara de tre olika delarna och kopplingen mellan dem)? (6 poäng) b) Förklara vad de olika delarna i MVC motsvarar i Angular.js och varför/hur de motsvarar dessa delar i Angular.js? (6 poäng) Sida 8 av 9

9 Fråga 2: Angular.js i praktiken (28 poäng totalt) Beskriv hur man kan använda Angular.js för att bygga en webbapplikation. (Utgå t.ex. från din gruppinlämning på denna delkurs.) a) Vad används Angular.js templates till? () b) Vad används Angular.js controllers till? () c) Vad används Angular.js directives till? (3 poäng) d) Vad används $scope till? () e) Hur kan Angular.js kommunicera med ett REST-api? () f) Berätta om två fördelar med att använda MVC-mönstret när man bygger en applikation. Förklara noga skillnaden mellan tillvägagångssätt med respektive utan MVC. (6 poäng) g) Finns det nackdelar med att använda MVC-mönstret? I så fall vilken/vilka? Motivera ditt svar. (4 poäng) h) Varför är versionshantering (t.ex. med git) bra när man arbetar i grupp? (3 poäng) i) Hur kan den agila metoden SCRUM underlätta när man arbetar i grupp? (4 poäng) Sida 9 av 9