pagetutor.com - HTML tutorials for the rest of us
JavaScript Tutor v 1.0 oversat af Ewan Rasmusson & Andrew Smith af Joe Barta
pagetutor.com
Download zip fil.
JavaScript Tutor - Lektion7

Øvelse: Tilføj til forgående. Lav to tekst felter. Når du klikker på linket, skal du få et alert felt til at komme frem med indholdet af et tekst felt, og derefter et andet alert felt med inholdet af det andet tekst felt.

Her er en løsning.

Øvelse: Lav en side med 2 små tekst felter ved siden af hinanden. Under tekst felterne laves 4 links... Lægge sammen, Trække fra, Gange og Dividere. Når brugeren klikker på Add linket skulle de to tal komme frem i felterne, læg dem sammen og vis svaret i et alert felt således... "5 + 3 = 8". Gør det samme med de andre funktioner.

Her er en løsning.

Læg mærk til at jeg siger "Her er en løsning" i stedet for "Her er løsningen". Når du går i gang med JavaScript programmering vil du ofte finde løsninger til opgaven. Man kan godt diskutere om den ene måde er "bedre" end den anden, men hovedsagen er at det fungerer. Da jeg først begyndte at programmere, var jeg altid bekymret for at gøre tingerne på den "rigtige" måde. En dag gik det op for mig... den "rigtige" måde, er det der virker. Du kan altid strømline det senere, hvis du ønsker det.

En anden egenskab vi kan få eller manipulere er dokumentets baggrundsfarve. Kig på det her... 

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT language="Javascript"><!--

function BgcolorGetter()
{
   alert (window.document.bgColor);
}

//--></SCRIPT>

</HEAD>
<BODY BGCOLOR="#BBDDCC">

Klik <A HREF="Javascript:BgcolorGetter()">her</A> for dette dokumentets baggrund farve.

</BODY>
</HTML>

Prøv det.

bgColor er en egenskab for dokumentets objektet. Prøve at lege med farven i body tag'et og sørg for at det altid giver den rigtig baggrundsfarve. Fjern BGCOLOR egenskaben fra body tag'et og se hvad der sker.

Kan vi indstille bgColor? Ja selvfølgelig... 

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT language="Javascript"><!--

function BgcolorSetter(mycolor)
{
   window.document.bgColor = mycolor;
}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="Javascript:BgcolorSetter('#FF9999')">Red</A>&nbsp;&nbsp;&nbsp;
<A HREF="Javascript:BgcolorSetter('#99FF99')">Green</A>&nbsp;&nbsp;&nbsp;
<A HREF="Javascript:BgcolorSetter('#9999FF')">Blue</A>
</BODY>
</HTML>

Prøv det.

Forstår du hvad der sker? Studér det indtil du gør.

Øvelse: Vælg 3 andre farver og tilføj dem til siden. SAMT, tilføj noget så den originale farve på siden er registreret ved starten og tilføj et syvende valg,så farven vender tilbage til denne standardværdi.

Her er en løsning.

Bemærk at i den tidligere (og følgende) løsning er scripting efter <BODY> tag'et. Dette har en enkel forklaring. Efter lidt eksperimenteren lagde jeg mærke til at nogle browsere registrerer bgColor der hvor body tag'et indlæser. Hvis du beder browseren om at huske bgColor inden den læser body taggen, kan den ikke huske det og scriptet vil opføre sig mærkeligt. Jeg har kun lagt mærke til denne særhed i de sidste versioner af Netscape. (Et perfekt eksempel som viser, at du altid skal prøve dine scripts af på et par forskellig browsers, og hvorfor de-bugging er en stor del af programmering.) Det letteste er at placere scriptet efter body tag'et. Jeg ved godt at det er mest almindeligt, at placere scriptet i HEAD sektionen, men det er kun en vejledende fremgangsmåde, den er ikke obligatorisk.

Øvelse: Lav endnu en side og indsæt følgende billeder...

0000CC 009900 339999 CC0033

Hex farve color koderne er på billederne. Sørg for at dokumentets bagrundsfarve ændre sig når musen passerer hen over hvert enkelt billede. Når musen flytter sig væk fra billedet, skal baggrundsfarven gå tilbage til standardindstillingen.

Her er en løsning.

<< Tilbage         Næste >>

JavaScript Tutor

   Lektioner:   Intro  1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  21  22  23  24  25