Övnings hemtentamen med förslag till lösning, webbprogrammering

Transkript

1 Övnings hemtentamen med förslag till lösning, webbprogrammering Se detta som ett förslag efter som uppgifterna ofta går att lösa få flera sätt. Uppgift 1 CSS 4 poäng Alla css regler skall placeras i en separat css fil som länkas till xhtml filen. Skriv en CSS regel som placerar en bakgrundsbild i centrum av sidan och som ger all text i body en font storlek av 11 punkter, ett radavstånd om 14 punkter, teckensnittet Tahoma och en vänstermarginal om 20 punkter. Den skall även ge alla h1 och h2 rubriker fet text utan serifer och en ram runt texten och ljust grön bakgrundsfärg inuti ramen. H1 rubriken skall ha en fontstolek av 20 punkter med röd text, h2 rubriken en storlek av 16 punkter och blå text. Slutligen skall alla element som omfattas av attributet class = "moveright" ändra färg till blå och skifta texten 15 pixlar till höger. body font-size: 11pt; background: url(bild.gif) no-repeat center center; margin-left: 20pt; line-height: 14pt; font-family: Tahoma, sans-serif;.moveright right: -15px; color: blue; position: relative; h1 border-right: gray 2px groove; padding-right: 0em; border-top: gray 2px groove; padding-left: 0em; font-weight: bold; font-size: 20pt; padding-bottom: 0em; margin: 0em; border-left: gray 2px groove; color: red; padding-top: 0em; border-bottom: gray 2px groove; font-family: "verdana", sans-serif; background-color: lightgreen; h2 border-right: gray 2px groove; padding-right: 0em; border-top: gray 2px groove; Sida 1

2 padding-left: 0em; font-weight: bold; font-size: 16pt; padding-bottom: 0em; margin: 0em; border-left: gray 2px groove; color: blue; padding-top: 0em; border-bottom: gray 2px groove; font-family: "verdana", sans-serif; background-color: lightgreen; Uppgift 2, Kontrollstrukturer a) 2 poäng Skriv ett JavaScript som läser in storleken på sidan av en kvadrat från en imatningsprompt och sedan med hjälp av for loopar skapar en xhtml text som visar kvadraten med kanterna representerade med hjälp av stjärnor (*) i webbläsaren. Programmet skall fungera för kvadrater med sidstorlek mellan 1 och 20 tecken. <?xml version = "1.0" encoding="iso ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <! Lösning, Uppgift 2 a --> <html xmlns = " <head> <title> Lösning, Uppgift 2 a </title> <script type = "text/javascript"> <!-- var stars, // number of stars per side input, // for user input row = 1, // counter for rows col = 1; // counter for columns // read number from user as a string input = window.prompt( "Enter length of side:", "10" ); // convert numbers from a string to an integer stars = parseint( input ); if ( stars < 1 ) stars = 1; window.alert( "Incorrect value input using default value 1" ); else if ( stars > 20 ) stars = 20; window.alert( "Incorrect value input using default value 20" ); Sida 2

3 document.writeln( "<pre>" ); while ( row <= stars ) while ( col <= stars ) if ( row == 1 row == stars ) document.write( "* " ); else if ( col == 1 col == stars ) document.write( "* " ); else document.write( " " ); ++col; document.writeln(); col = 1; ++row; document.writeln( "</pre>" ); // --> </script> </head> <body> <p> Click Refresh (or Reload) to run this script again. </p> </body> </html> Sida 3

4 b) 2 poäng Ett stort företag betalar sina säljare på provisionsbasis. Varje säljare erhåller 2000 kr per vecka, plus 9 % av deras försäljningsintäkter för den veckan. Exempelvis en försäljare som säljer för kr under en vecka erhåller 2000 kr plus 9 % av kr totalt 6500 kr. Nedan följer en lista över de produkter/varor som företaget säljer och dess värde. Vara Värde , , , , 90 Utveckla ett program som skriver ut vad en säljare sålt föregående vecka, räknar ut personens lön och skriver detta till en XHTML sida. Hur data skall matas in (prompt, formulär eller annat) avgör ni själva. <html xmlns = " <head> <title>lösnng uppgift 3 b</title> <script type = "text/javascript">  </script> </head> <body> <p> Click Refresh (or Reload) to run this script again. </p> </body> </html> Sida 4

5 Uppgift 3, Objekt a) 3 poäng Skriv ett JavaScript som använder relationsoperatorer och likhetsoperatorer för att jämföra två strängar (String) som matas in av användaren via ett XHTML formulär. Scriptet skall skriva ut vilken stäng som är störst eller om de är lika till en XHTML textarea. <?xml version = "1.0" encoding="iso ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <! Lösning uppgift 3 a --> <html xmlns = " <head><title> Lösning uppgift 3 a </title> <script type = "text/javascript">  </script> </head> <body> <form name = "myform" action = ""> <table border = "0"> <colgroup><col span = "2" align = "center" /> </colgroup> <tr><td>enter first string: </td> <td><input name = "first" type = "text" /> </td> </tr> <tr><td>enter second string:</td> <td><input name = "second" type = "text" /> </td> </tr> <tr><td><input type = "button" value = "Compare" onclick= "comparestrings()" /></td> </tr> Sida 5

6 <tr><td colspan = "2"> <textarea name = "output" rows = "4" cols = "30"></textarea></td> </tr> </table> </form> </body> </html> b) 2 poäng Använd screen objektet för att få information om klientens skärmstorlek. Skriv sedan ut skärmstorlek och tillgänglig skärm yta till sidan. <?xml version = "1.0" encoding="iso ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <! Uppgift4, förslag till lösning --> <html xmlns = " <head> <title> lösning Uppgift4</title><h1> Uppgift 3b</h1> </head> <body> <script type="text/javascript"> document.write("din Upplösning är: ") document.write(screen.width + "*" + screen.height + ".<br/>") document.write("tillgänglig skärmyta: ") document.write(screen.availwidth + "*" + screen.availheight + ".") </script> </body> </html> Sida 6

7 Uppgift 4, Eventhantering 3 poäng Använd CSS absolut positionering, onmousemove och event.x/event.y för att få en kort text att följa muspekaren då den flyttas över webbsidan. <?xml version = "1.0" encoding="iso ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <! Uppgift4, förslag till lösning --> <html xmlns = " <head> <title> lösning Uppgift4</title> <script type = "text/javascript">  </script> </head> <body> <p id = "mtext" style = "position: absolute; left: 200"> Moving text </p> </body> </html> Sida 7

8 Uppgift 5, xml 4 poäng Skapa en XML fil som beskriver näringsdata för Nisses kakor. Nisses kaka har ett näringsinnehåll per kaka om; totalt 260 kalorier varav 100 kalorier är fett, totalt 11 gram fett varav 2 gram är mättat fett, 5 milligram kolisterol, 210 milligram sodium, totalt 36 gram kolhydrater varav 2 gram fibrer, 15 gram socker och 5 gram protein. XML filen bifogas lösningen. <?xml version = "1.0" encoding="iso "?>   <product name = "Nisses Cookies"> <servingsize>1 package</servingsize> <calories> <total>260 Calories</total> <fat>100 Calories</fat> </calories> <fat> <total>11 grams</total> <saturated>2 grams</saturated> </fat> <cholesterol>5 milligrams</cholesterol> <sodium>210 milligrams</sodium> <carbohydrates> <total>36 grams</total> <fiber>2 grams</fiber> <sugars>15 grams</sugars> </carbohydrates> <protein>5 grams</protein> </product> Sida 8

9 Uppgift 6, Teoretiska frågor 12 poäng Uppgifterna i denna del kan ge från 0 till 12 poäng. Varje rätt besvarad uppgift ger 1 poäng. Varje fel besvarad uppgift ger 1 poäng. Ett eventuellt negativt resultat för uppgift 5 påverkar inte totalresultatet negativt. Frågorna skall besvaras med ja eller nej utan motivering. Ange bokstav (a till l) och svar och infoga en radmatning före nästa svar a) a) Ett dokuments presentation är det samma som det dokumentets struktur. b) Attribut beskriver karakteristiken för ett element. c) Span attributet avgör hur många kolumner som col elementet formaterar. d) Om man använder method = "post" lags formulärets data till webbläsarens request vilken innehåller protokollet (dvs. HTTP) och den efterfrågade resursens URL. e) Inline Styles har högre prioritet än andra styles som kan vara applicerade på dokumentet. f) MIME typen för ett CSS style sheet är "stylesheet = CSS". g) En variabel i JavaScript är en plats i datorns minne där ett värde kan lagras för användning av programmet. h) I uttrycket?: är den första oreranden ett Boolskt utryck, den andra är det värde som vilkorsutrycket ges om uttrycket evalueras som sant och det tredje är det värde som uttrycket ges om uttrycket evalueras som falskt. i) Efter exekvering av följande kod kommer variabeln x att ha värdet 2. var x; x = 0; for ( var count = 0; count < 5; count++) if ( count == 3 ) continue; x += 1; j) innertext egenskapen för ett objekt refererar till den text som det elementet innehåller. k) Om du vill att ett formulärs submit -knapp skall utföra något annat än att skicka formulärets data så skall returnvalue egenskapen sättas till false. l) När du använder TDC och EOF egenskapen för ett recordset objekt är true, då har du nått slutet på datakällan. Uppgift 6 del rätt svar a) Falskt b) Sant Sida 9

10 c) Sant d) Sant e) Sant f) Falskt g) Sant h) Sant i) Falskt j) Sant k) Sant l) Sant Lycka till/pär-ove Sida 10