Diverse opgaver

De 5 dokument-dimensioner + browser
Dreamweaver + EnSimpelSide.html
Struktur
Billeder
Links
CSS
Mouseover
Begrebskort 1

Variable
Funktioner
Events
Selektion
Iteration
Array
Begrebskort 2

Normalisering
E/R-diagram

Computer
Begrebskort 3


De 5 dokument-dimensioner + browser

  1. Tænd din browser.
  2. Find Libellus.
  3. Lav et bogmærke (genvej) til Libellus.
  4. Find den alfabetiske liste over begreber og kilder i Libellus.
  5. Find kilden "Musik (Alf)".
  6. Prøv at finde ud af hvordan de 5 dimensioner viser sig - er de der alle 5?
  7. Gør det samme for kilden "A Technical Introduction to XML".
  8. Følg links fra denne side videre til andre sider og gentag øvelsen.
  9. Kender du selv nogle hjemmesider du plejer at bruge? Gentag øvelsen for disse.

Dreamweaver + EnSimpelSide.html

  1. Tænd Dreamweaver.
  2. Hav EnSimpelSide.html i din browser.
  3. Kopier kildekoden til denne side over i en ny side i Dreamweaver - vær sikker på at du står i kode-vinduet imens.
  4. Gem denne nye side på din egen maskine.
  5. Få denne nye side frem i en browser.
  6. Lav rettelser i din side, og se dem komme frem i browseren.
  7. Skift mellem "kode" og "udseende" i Dreamweaver. Er udseendet ens i browseren og i Dreamweaver?
  8. Find nogle sider, du godt kan lide i din browser. Prøv at kopiere kode over fra disse sider til din egen side. Bliver resultatet som du forventede?

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:


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:

Og disse mulige følger af events:

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

Array

(Et bud på løsningen.)

Begrebskort 2

Dagens begreber:


Normalisering

E/R-diagram


Computer

Begrebskort 3

Begrebskort i dag: