Diverse opgaver

Struktur

1. Find en eller anden side i Dreamweaver - fx. den du arbejdede med i de ovenstående øvelser.
2. Find et stort stykke tekst et eller andet sted - find fx. beskrivelsen af den her uddannelse på imma.dk.
3. Kopier denne tekst over på din side.
4. Har teksten struktur i forvejen? Hvordan?
5. Læg en plan for hvordan du vil ændre tekstens struktur: lave en liste, en ny overskrift eller en tabel fx.
6. Prøv at realisere din plan.

Billeder

1. Find en side i Dreamweaver.
2. Find et billede - fx. et du har lavet i en tidligere time.
3. Prøv at få billedet indsat på din side.
4. Sæt billedet ind 2 gange ved siden af hinanden. Kan du få billederne til at stå helt tæt ved siden af hinanden?
5. Helt tæt ovenpå hinanden?
6. Kan du få billedet til at have en anden størrelse?

Links

1. Du skal have lavet mindst 2 sider.
2. Find nu den ene i Dreamweaver.
3. Lav et link fra denne side til anden. Test det i en browser.
4. Lav et link på den anden side tilbage til den første.
5. Lå de to dokumenter i forskellige mapper? Ellers så prøv det også.
6. Prøv at lave et link til et billede. Hvordan reagerer browseren? Har du prøvet det med .bmp?
7. Find et par sider på internettet, du godt kan lide, og lav link til dem.
8. Prøv at lave en start-side, hvor du via en tabel inddeler siden, så du kan have en menu ude til venstre med mindst 3 links, 1 (lille) billede af dig selv foroven, og noget tekst på midten.

CSS

1. Tag fat i en af de sider, du allerede har lavet. Lav en plan for hvordan du vil dekorere den med fonte og farver.
2. Realiser din plan vha. inline styles.
3. Realiser din plan vha. et style sheet i toppen af dokumentet.
4. Realiser din plan vha. et style sheet, der ligger i en anden fil. Her skal dit style sheet bruges fra en anden fil også.

Mouseover

1. Find eksemplet hvor mouseover bliver brugt.
2. Find to billeder (som du evt. selv har lavet), der kan bruges som knapper. De skal have samme størrelse.
3. Find en side, du selv har liggende.
4. Indsæt det ene billede på din side.
5. Kopier kode over til din egen side, indtil du kan lave det samme mouse-over-trick på din egen side.

Begrebskort 1

Begrebskort generelt:

1. Der udleveres eller dannes en liste med ord.
2. Tag stilling til hvordan disse ord skal placeres 2-dimensionalt, for at ord, der har "noget med hinanden at gøre", er "tæt på hinanden". (Så stregerne i de senere trin bliver korte.) Tegn ordene ind på et stykke papir eller i en Star Office Draw tegning, i bobler.
3. Tænk over hvordan der kan konstrueres korte og præcise sætninger, to ord indgår i.
   1. Dreamweaver er en slags forfatterværktøj.
   2. XML er i familie med XHTML.
4. Lav streger/pile der svarer til de netop dannede sætninger. (Se nedenfor.)
5. Der skal laves mange streger/pile!

Begrebskort i dag:

• billede
• formatteringssprog
• h1-tag
• Javascript
• programmeringssprog
• stylesheets
• XHTML

Variable

(I denne, og alle de følgende opgaver, antages det, at der kodes i Javascript, og der henvises til eksempler fra "Start på Javascript 1.5; Jes Nyhus; 1.udgave".)

1. Kopier eksempel 1.1, så du har det liggende på din egen PC - enten ved at skrive det af, eller ved at hente det fra internettet og gemme det lokalt.
2. Hvilket objekt bruges der i dette stykke kode? Skriv dit svar i en kommentar.
3. Hvilken metode bruges der i dette stykke kode? Skriv dit svar i en kommentar.
4. Ændr din side, så den kommer til at ligne eksempel 3.1.
5. Ændr nu din side, så din variabel hedder noget andet.
6. Hvad hedder din variabel nu? Skriv dit svar i en kommentar.
7. Du opretter variable, simpelthen ved at nævne dem, og give dem en værdi. Opret 2 nye variable med tal, og en ny variabel med tekst.
8. Træk det ene tal fra det andet, og gem resultatet i en ny variabel.
9. Sæt de to strenge sammen, og gem resultatet i en ny variabel.
10. Udskriv de to nye variable på skærmen.

Funktioner

1. Skriv pseudokoden for en funktion, der kan modtage en "momsløs" pris, og returnere en "momset" pris.
2. Tag så udgangspunkt i eksempel 4.2, og kom frem til en funktion, der kan beregne moms.
3. Kald din funktion med flere forskellige priser, og udskriv resultatet.

Events

I kapitel 5 nævnes disse events:

• onMouseOver
• onMouseOut
• onMouseDown
• onMouseUp
• onClick
• onDblClick
• onLoad
• onkeypress
• onkeyup
• onkeydown

Og disse mulige følger af events:

• tekst skifter farve
• popup vindue popper op

I denne opgave skal du vælge en event og en følge, og kombinere disse to. Bemærk at du også skal vælge, enten mindst en farve (teksten kan skifte til) eller en tekst (til popup).

Selektion

I eksempel 5.2 nævnes det hvordan et program kan opfange hvilken tast der blev trykket. I eksempel 6.3 kan man reagere på om en given variabel har en bestemt værdi eller ej. I eksempel 6.4 kan man reagere på flere forskellige mulige værdier. Opgaven er at kombinere 5.2 med et af de andre eksempler, så du kan lave forskellige popup-boxes, afhængigt af hvad folk trykker. Husk at starte med at lave pseudokode for hvad dit program skal gøre. Forslag: lav et program, der fx. besvarer tastetrykket "b" med "banan", og tastetrykket "g" med "giraf" osv. - altså besvarer et bogstav med et ord, der begynder med det bogstav.

Iteration

Du kan vælge om du vil bruge for eller while i denne opgave, men starten af opgaven er den samme uanset hvad du vælger.

Fibonacci tal er en bestemt række tal, der opstår ved at man bliver ved med at lægge de to foregående tal sammen. De to første tal er 1 og 1. Det tredje tal er 1 + 1 = 2. Det fjerde tal er 1 + 2 = 3. Det femte tal er 2 + 3 = 5. Osv. 1, 1, 2, 3, 5, 8, ...
Man kan bl.a. lave fibonacci tal på skærmen ved at have tre variable, og bruge dette stykke pseudokode:

a = 1
skriv a
b = 1
skriv b
gentag
	c = b + a
	skriv c
	a = b
	b = c

• Vælg om du vil have gentagelsen varer indtil der fx. er skrevet 7 tal på skærmen (for), eller indtil c fx. er 50 (while).
• Skriv et program der skriver fibonacci tal på skærmen.
• Fibonacci tal har bl.a. smukke egenskaber når man prøver at tegne dem. Du kan senere vende tilbage til denne opgave, og fx. tegne firkanter med a og b som sidebredde, der bliver større og større.

Array

• Denne opgave går ud på at brugeren skal gætte et bogstav.
• Beslut først, om brugeren skal have et endeligt antal gæt (for-agtigt), eller skal blive ved med at gætte, til der gættes rigtigt (while-agtigt).
• Brugeren får ikke umiddelbart andet at vide, end at gæt nr. x er registreret (popup box).
• Når spillet er slut (det endelige antal gæt er brugt, eller der er gættet rigtigt), så bliver det udskrevet hvilket bogstaver der blev gættet på, og hvad det rigtige bogstav var.
• Skriv pseudokode, der beskriver dette spil.
• Skriv selve programmet.

Begrebskort 2

Dagens begreber:

• array
• for
• gentage kodestump
• if
• kontrolstruktur
• struktur af variable med samme datatype
• vælge kodestump
• while

Normalisering

• En virksomhed skal holde styr på to sider af sin virksomhed. Dels skal der ligge et kursus-katalog på en hjemmeside, hvor kommende kursister kan booke sig ind på kurser. Dels kan kursister kommunikere med lærerne. Der er altså tale om en database, der indeholder kurser, konkrete datoer for disse kurser (et kursus kan holdes mere end én gang), lærere, kursister, beskeder osv.
• Prøv at gennemføre normalisering af denne database.
• Lav dataordbog for den fremkomne database.

E/R-diagram

• Tag fat i en database, der allerede er nået til dataordbog-niveau, og lav E/R-diagram for den.

Computer

• Ansku det sidste projekt, du lavede.
• Prøv at formulere en beskrivelse af hvilke krav der stilles til brugerens computer, for at programmet kan køre som ønsket.
• Hvilke komponenter kræves der?
• Er der krav til operativsystem og anden software?

Begrebskort 3

Begrebskort i dag:

• Array
• Database
• Event
• PHP
• Platform
• Proces
• Variabel