Labora&on 1 Variabler och beräkningar övningar/uppgi9er

Transkript

1 Labora&on 1 Variabler och beräkningar övningar/uppgi9er 1M322 Webbteknik 2, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se

2 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det en antal filer som du kan ladda ner i en zip- fil. Länk &ll zip- filen finns på labora&onens webbsida. Då du packat upp zip- filen, får du en mapp med två filer och ynerligare en mapp med en antal filer.

3 2. Länk &ll scripuil Du ska nu skapa en fil för JavaScript- koden och länka in den i HTML- filen. Öppna din webbeditor och skapa en ny fil för JavaScript. Lägg in kommandot alert("hej hela världen"); i filen. Det är det enda som just nu ska ligga i filen, för an testa den. Spara filen med namnet script.js i samma mapp som du har HTML- filen som du laddade ner. Öppna filen index.htm i webbeditorn. I head- delen lägger du in en script- element som refererar &ll filen script.js. Öppna filen index.htm i din webbläsare. Då filen läses in ska du få en ruta med meddelandet som du skrev i alert.

4 3a. En init- funk&on Nu ska du i scripuilen lägga in en funk&on som anropas, då webbläsaren läst in hela webbsidan. Du kommer skapa en kod som liknar den som finns i exempel js1- ex3-2 i föreläsning 1, fast du gör det här i två steg. I filen script.js skriver du en funk&on som du kallar init. FlyNa alert- satsen med din hälsning &ll funk&onen, så an den ligger mellan klamrarna för funk&onen. E9er funk&onen skriver du window.onload = init; DeNa gör an init uuörs, då webbsidan är inladdad i fönstret. Testa i webbläsaren. Om du foruarande har index.htm öppen, klickar du på knappen för an ladda om. Annars får du öppna sidan igen. Meddelandet från alert ska nu komma, då webbsidan är inläst.

5 3b. En tesuunk&on Nu ska du skapa ynerligare en funk&on och koppla den &ll knappen på webbsidan. I script.js lägger du &ll en funk&on som du kallar testscript. FlyNa alert- satsen från init &ll testscript. Du refererar här &ll id- anribut i HTML- koden. Så &Na även i filen index.htm, och se vilka element det refereras &ll. I init- funk&onen skriver du in de fyra rader som finns i rutan här in&ll, dvs samma som i init- funk&onen i exempel js1- ex3-2. De tre variablerna deklarerar du ovanför funk&onen. De måste ligga där, för an du sedan även ska kunna använda dem i den andra funk&onen. Testa i webbläsaren. Ladda om sidan, så an det nya scriptet läses in. Klicka på knappen, så ska meddelandet med alert dyka upp. I exempel js1- ex3-2 ser du också an det finns kommentarer ovanför variablerna och funk&onerna, som förklarar vad de är &ll för. Man bör all&d ta med förklarande kommentarer i sin kod, så lägg in sådana kommentarer i din kod också.

6 4. Läs input och skriv på sidan Nu ska du skriva in kod i funk&onen testscript, för an avläsa texuälten och skriva i div- elementet på sidan. I funk&onen testscript tar du nu bort alert- satsen och lägger istället in det följande. Deklarera två variabler, speed och Ame. Läs in det första texuältet och spara i variabeln speed. Det andra texuältet sparar du i variabeln Ame. Det ska vara tal som ska skrivas i texuälten, så konvertera &ll den datatypen med Number. Vi gör dock nu ingen kontroll av an användaren verkligen skriver tal. Det kommer i labora&on 2. Skriv ut variabeln speed på webbsidan, för an testa an det fungerar an avläsa fältet och skriva på sidan. Testa i webbläsaren. Skriv något tal i det första texuältet och klicka på knappen. Det du skrev i texuältet ska då skrivas på sidan under rubriken Resultat.

7 5. UNryck Nu ska du beräkna den sträcka man kommer med den has&ghet och &d som användaren skriver i texuälten. Deklarera variabeln distance i början av funk&onen. E9er raderna där du läste in speed och Ame lägger du in en unryck för an beräkna sträckan. Resultatet sparas i variabeln distance. Sträckan är has&ghet gånger &d, men e9ersom has&gheten är i km/h och &den i minuter, måste du också dividera med 60, så an enheten för &den också blir &mmar. Ändra utskri9en &ll an skriva ut distance &llsammans med någon lämplig text. Lägg &ll två br- taggar i slutet av utskri9en. Du ska i kommande övningar göra flera utskri9er och då ska de hamna på en rad under denna. Testa i webbläsaren Skriv in några värden i texuälten och klicka på knappen.

8 6. Fler unryck Nu ska du beräkna hur lång &d det tar an köra samma sträcka med en lägre has&ghet. Sist i funk&onen testscript lägger du &ll kod för an beräkna &den. Tiden blir sträckan delat med has&gheten. Det blir då i &mmar, så du får mul&plicera med 60, för an få det i minuter. Skriv ut värdet i Ame &llsammans med lämplig text. Använd nu operatorn +=. Då lägger du &ll den nya texten, utan an ta bort den gamla. Testa i webbläsaren. Värdet för &den blev nu en flynal med många decimaler, men vi struntar i det nu. Det går avrunda &ll heltal med parseint, men vi tar det i nästa labora&on.

9 7. Beräkning av reak&onssträcka Nu ska du beräkna hur långt man åker från det man upptäcker en fara &lls man börjar bromsa, dvs reak&onssträckan. DeNa ska beräknas i hur många meter man åker med den has&ghet som angens i inpuuältet. I funk&onen testscript lägger du &ll två variabler, reacaontime och speedms. Variabeln reacaontime ska innehålla hur lång &d det tar innan man reagerar. Antag an det tar tre sekunder, så lägg in värdet 3 i den variabeln. Variabeln speedms ska vara has&gheten i m/s. För an omvandla från km/h mul&plicerar du med 1000 och dividerar med Sträckan beräknas, liksom &digare, med formeln has&ghet gånger &d. Testa i webbläsaren. Prova an ändra värdet för reacaontime i programmet och ladda om sidan.

10 8. Accelera&onssträcka Nu ska du beräkna accelera&onssträcka för tre olika bilar. Namn och &d för dessa läggs in i två "arrayer". Deklarera variablerna car och acctime i början av funk&onen testscript. Dessa ska vara arrayer, så lägg in värden i dem direkt. Tiden anges i sekunder och sträckan ska anges i meter, så has&gheten 100 km/h får först räknas om &ll enheten m/s, genom an mul&plicera med 1000 och dividera med Accelera&onssträckan beräknas som has&gheten gånger accelera&onen delat med 2. Vi antar an det är en jämn accelera&on hela &den. Genom division med 2 får vi alltså en medelvärde mellan sträckan för den lägsta has&gheten (0) och den högsta has&gheten. DeNa beräknas för de tre bilarna och &den erhålls ur arrayen acctime. Testa i webbläsaren.

11 9. Egna &llägg Nu har du gån igenom en antal övningar, där du fån koden given. Du har alltså sen i bilderna hur du ska skriva koden. Nu kommer en par uppgi9er, där du inte får koden. Det beskrivs vad du ska göra, men det är upp &ll dig an avgöra hur det ska göras. Du skriver alltså kod för beräkningarna och skriver ut resultat på webbsidan. Vid behov inför du också nya variabler. 9a. Beräkning av sträcka Beräkna den sträcka som man kör under 20 sekunder om has&gheten är 40 km/h högre än den som angens i texuältet. Sträckan ska anges i meter, så has&gheten får omvandlas &ll m/s. Skriv sedan ut sträckan &llsammans med lämplig text under de övriga utskri9erna i programmet. 9b. Beräkning av accelera3on Inför en ny variabel för accelera&on. Beräkna accelera&onen i m/s 2 för en BMW för km/h och med den &d som anges i arrayen. Formeln för accelera&on är has&ghet dividerat med &d. Skriv sedan ut accelera&onen &llsammans med lämplig text under de övriga utskri9erna i programmet.

12 10a. Finn fem fel AN hina fel (dvs "debugging") är en vik&g del av programmering. Här ska du öva på an hina några fel i en program. Öppna filen index.htm i mappen fel i webbläsaren Firefox. Om du inte redan har Firebug installerat, så laddar du ner det via hnp://geuirebug.com/ Ak&vera Firebug. Du ak&verar Firebug genom an klicka på dess symbol och sedan ladda om webbsidan. Behöver du ynerligare instruk&oner, ges det i filmen js1-5 i föreläsning F1. Öppna också filen script.js i mappen fel i din webbeditor, så an du kan räna felen där. Det första felmeddelande som Firebug ger är på rad 29. Felmeddelandet är an det saknas semikolon e9er width. Felet är dock an det saknas en operator för mul&plika&on. RäNa felet, spara filen och ladda om sidan i webbläsaren. Det andra felet är på rad 33. Felmeddelandet säger an det förväntades en unryck, men det kom <. I koden står det area + och då förväntar sig webbläsaren an unrycket ska fortsäna. Felet här är an det första cita&onstecknet kring "<br><br>" saknas. RäNa felet, spara filen och ladda om sidan i webbläsaren. När du nu laddar om sidan kommer inget felmeddelande i Firebug. fortsämning på nästa sida...

13 10b. Finn fem fel... fortsämning från föregående sida Skriv in några värden i texuälten och klicka sedan på knappen. Då får du en nyn felmeddelande i Firebug. Felet är på rad 27 och felmeddelandet säger an number inte är definierat. Felet är an det är felskrivet. Det ska vara Number med stort N. RäNa felet, spara filen och ladda om sidan i webbläsaren. Kör programmet igen, så får du nästa felmeddelande på rad 32. Felmeddelandet säger an heigth inte är definierat. Här är det också en felstavning, där h och t är omkastat. Det ska vara height. RäNa felet, spara filen och ladda om sidan i webbläsaren. Kör programmet igen, genom an klicka på knappen. Nu får du inga fler felmeddelanden och utskri9en kommer ut. fortsämning på nästa sida...

14 10c. Finn fem fel... fortsämning från föregående sida Men rubriken på övningen är ju "Finn fem fel" och hislls har det endast varit fyra fel. Så vad är det femte felet? Arean för ovalen blir all&d 3, oavsen vilka värden som skrivs in i webbläsaren. Felet är alltså i uträkningen av arean på rad 35. Där står det area = 3,14... etc. Arean säns &ll 3. Sedan kommer en kommatecken och en nyn unryck. DeNa är inte språkligt fel, utan man kan räkna ut flera unryck åtskilda av komma. Man kan t.ex. skriva a=5, b=7; för an ge två variabler värden sam&digt. Men felet här är an det inte ska vara komma, utan en punkt, för an få korrekt värde för pi. FlyNal i JavaScript skrivs med decimalpunkt och inte decimalkomma. RäNa felet, spara filen och ladda om sidan i webbläsaren. Kör programmet igen och kontrollera an det nu blir rän resultat.

15 10d. Finn fler fel Experimentera nu med programmet och debuggern och se vilka fel Firebug kan upptäcka och vad felmeddelandena blir. Inför egna fel i programkoden och ladda om sidan i webbläsaren. Kontrollera om Firebug ger felmeddelande och vad det säger. RäNa felet, ladda om och fortsän &ll du inte får några fler felmeddelanden.

16 11. Publicera din program Då du är klar med din program publicerar du det i Web publishing i FirstClass. Lägg upp din program i en mapp kallad lab1 i mappen dold i Web Publishing i FirstClass. Dvs mappen dold, som du skapade i kursen 1ME321. Skapa sedan en länk &ll filen index.htm i lab1 från filen index.htm i Web publishing, dvs ingångssidan för din poruolio. PorUolion, som du skapade i kursen 1ME321. Öppna din poruolio i webbläsaren och testa an länken och din program fungerar.