Globale linker

JavaScript

Oppgaver

For å se løsningen velg View > Source i browseren. Eller så kan du laste ned dette dokumentet, som også inneholder mer om Javascript

1. Lag et enkelt javascript som viser teksten "Jeg skriver JavaScript!" i en alertboks. Løsning

2. Lag et JavaScript der du ber brukeren om å taste inn et tall, og deretter viser du dette tallet i en alertboks. Løsning

3. Endre på ovenstående script slik at det viser teksten "Velkommen" på siden i en H1-tag, dersom brukeren skrev inn 1, H2-tag dersom brukeren skrev inn 2, osv. Løsning

4. Utvid scriptet slik at dersom brukeren skriver inn et tall som er større enn 7 eller mindre enn 1, så skal programmet vise en dialogboks med en feilmelding og teksten "Velkommen!" skal skrives ut i en H3-tag. Løsning

5. Lag et JavaScript som leser inn et tall ved hjelp av en prompt, og så spør du ved hjelp av en confirm om brukeren vil få beregnet tallet plusset eller ganget med seg selv. Svaret skal beregnes og vises ved hjelp av en alert. Svaret skal inneholde både selve tallet og en beskrivende tekst, f.eks: "7 ganget med seg selv er 49". Løsning

6. Lag et program som spør brukeren om hva han/hun heter og som finner ut om det brukeren tastet inn er det samme som ditt eget navn.Hvis navnene er like skal scriptet skrive "Du er meg!" på siden. Hvis brukeren ikke skriver inn noe navn, skal programmet skrive "Heter du ingenting?", ellers skal programmet skrive f.eks. "Hei på deg, Ola". Løsning

7. Lag et skjema med et tekstfelt. Lag en funksjon som viser hva som står i tekstfeltet, og viser dette i en dialogboks. Løsning

8. Endre funksjonen slik at den viser en melding bare dersom teksfeltet er fylt ut. Løsning

9. Lag en pizza-bestillingsside hvor man velger størrelse, fyll fra to nedtrekksmenyer og skriver inn antall pizzaer man ønsker i et tekstfelt. Når man trykker mpå Send-knappen skal et JavaScript sjekke at alle fletene er fylt ut og at man har valgt noe i alle SELECTene (i SELECTENE må det altså være et blankt valg). Løsning

10. Lag en enkel HTML-side med teksten "Din bestilling er sendt" og sørg for at brukeren sendes videre til denne dersom alle feltene er fylt ut når Send-knappen trykkes. Løsning

11. Hent terning-gif'ene her. Lag en webside som viser en hvit terning. Bruk onMouseOver til å kalle en funksjon som endrer til en likt nummerert svart terning. Bruk onMouseOut til å sørge for at terningen blir hvit igjen når du tar musepekeren vekk fra bildet. Løsning

12. (For de som føler seg ovenpå) Endre programmet slik at det trekker et tilfeldig tall når siden lastes og viser en hvit terning med tilsvarende tall. Det tilfeldige tallet lagres i en variabel, og funksjonen som bytter mellom svart og hvit terning må hente verdien fra denne variabelen. Du finner et tilfeldig tall slik:
var tall = Math.floor (Math.random() * 6) +1;
Løsning

13. (For de som føler seg ovenpå) Legg til en link rundt bildet. Når man trykker på denne skal programmet "trille" terningen ved å trekke et nytt tilfeldig tall og vise den tilsvarende terningen. Løsning

14. (For de som føler seg extremt ovenpå) Utvid slik at dette fungerer med to, deretter fem terninger. Løsning (Alternativ løsning)

15. Lag en webside med en link som åpner IT-Akademiets sider i et eget vindu. Vinduet skal være 600x400 stort og skal kun inneholde scrollbarer. Løsning

16. Lag et kontaktskjema med følgende felt: Fornavn, Etternavn, Gateadresse, Postnummer, Poststed, Email-adresse, Telefonnummer, Telefaxnummer. Så ved hjelp av radiobuttons skal vi gi brukeren anledningen til å velge hvordan han/hun vil bli kontaktet, enten ved Post, Email, Telefon eller Fax.
Lag et script som sjekker følgende:
A). Om fornavn er skrevet inn. Hvis ikke skal det alertes at fornavn må skrives inn.
B). Om etternavn er skrevet inn. Hvis ikke skal det alertes at etternavn må skrives inn.
C). Om Post er valgt som ønsket kontaktmetode, må vi sjekke om det fyllt ut noe i feltene Gateadresse, Postnummer og Poststed. Hvis ikke skal det alertes at fullstendig postadresse må skrives inn.
D). Om E-mail er valgt som ønsket kontaktmetdoe, må vi sjekke om det er fyllt ut noe i feltet E-mail. Hvis ikke skal det alertes at brukeren må oppgi emailadresse. I tillegg skal vi sjekke om det er oppgitt en reell email-adresse, altså om strengen inneholder tegnet "@". Hvis feltet ikke inneholder @ alerter vi at gyldig e-mail adresse må oppgis.
E). Om Telefon er valgt som ønsket kontaktmetode, må vi sjekke om det er fyllt ut noe i feltet Telefon. Hvis ikke skal det alertes at brukeren må oppgi telefonnummer.
F). Om Telefax er valgt som ønsket kontaktmetdoe, må vi sjekke om det er fyllt ut noe i feltet Telefax. Hvis ikke skal det alertes at brukeren må oppgi telefaxnummer.
Løsning

17. Lag en side med teksten "Hallo" i overskrift 1. Under overskriften skal det være tre knapper.

En knapp skal gjøre bakgrunnsfargen på siden rød og teksten blå
En knapp skal gjøre bakgrunnsfargen grønn og teksten gul
En knapp skal gjøre bakgrunnsfargen gul og teksten rød.

Hint: bgColor og fgColor. Løsning

18. Lag en side med to artikler. Deler av begge artiklene skal være skjult med (style="display: none"). Lag en link som viser og skjuler den delen av artikkelen som er skjult/vist. Løsning

19. Lag en side hvor du setter inn to bilder. Lag et script som swapper bilde ved onMouseOver og swapper tilbake ved onMouseOut. Scriptet skal være av en slik art at det kan brukes på et hvilketsomhelst bilde.
NB! Husk at bildene som skal swappes må ha samme dimensjoner. Løsning

20. Lag et script som skriver ut en tabell med tre kolonner. Tabellen skal være 400 px bred, ha 1 pixel bred kantlinje, ingen cellspacing eller cellpadding. I første kolonne skal du telle opp fra 0 til 100, i andre kolonne skal du plusse tallet med seg selv og i tredje kolonne skal du gange tallet med seg selv.
Ved hjelp av et stylesheet i <head> skal du formattere første raden med fete, serif bokstaver og ha en lysegul bakgrunn. De resterende cellene i tabellen skal ha non-serif skrift og teksten skal være midtstilt i cellen.

Altså:

Tall	Plusset med seg selv	Ganget med seg selv
0	0	0
1	2	1
2	4	4
og så videre...........................................

Løsning

21. Lag en side som inneholder overskriften "Åpne vindu", en link med samme tekst som overskriften og tre knapper med teksten "Rød overskrift", "Grønn overskrift" og "Blå overskrift".
Med linken skal du åpne et nytt vindu. Dette nye vinduet skal inneholde en overskrift og et bilde. Når det klikkes på bildet i det nye vinduet skal det nye vinduet lukkes. Du skal ikke åpne et eksisterende html-dokument, men kode inn i javascriptet hva vinduet skal inneholde.
De tre knappene skal brukes til å forandre fargen på overskriften i hovedvinduet. En som gjør overskriften rød, en grønn og en blå. Løsning

22. Lag en kalender. Når siden lastes skal cellen med dagens dato ha en rød bakgrunnsfarge. Cellene med dato skal også reagere på onMouseOver ved at de blir lysegule, og tilbake til hvit ved onMouseOut, unntatt cellen med dagens dato.(Du kan forøvrig laste ned en kalender-extension til Dreamweaver her). Løsning

23. Lag en billed-slideshow. Lag en tabell med 1 kolonne og 5 rader. Første rad inneholder en statisk overskrift, andre rad inneholder bildet, tredje rad inneholder den dynamiske billedteksten til bildet, fjerde rad inneholder dynamiske billednummer, og femte rad inneholder «Neste» og «Forrige knapper». Dette bør nok løses ved hjelp av Arrays.
Løsning

24. Lag et muse-Derby. Still opp et bilde av en mus i tre forskjellige layere. Disse layerne beveges dynamisk over siden ved hjelp av et script. Enklere enn du tror! Løsning

25. Lag et skjema med to knapper og ett tekstfelt. Når du klikker på den ene knappen skal det telles for hver gang det klikkes på denne knappen. Antall ganger som klikkes skal vises i tekstboksen. Den andre knappen skal åpne et nytt vindu hvor det også vises hvor mange ganger det er klikket. Løsning

26. Lag en tre-meny. Løsning

27. Lag små gule lapper som dukker opp med forklaring. Løsning

28. Lag en enkel dropdown-meny. Løsning