| |
|
|
| |
JavaScript Tutor - Lektion 17 Lad os først lave et enkel function som vil skrive til den højre frame. Jeg har opdaget, at når man bruger javaScript med frames, er det klogt at indsætte så mange koder som muligt i den første frameset side (master.html i eksemplet). Genåbn master.html og tilføj følgende...
Indtil videre er det kun en tom funktion. Nu skal vi skrive mit navn i den højre frame.
Kan du se hvad det er vi laver? Egentlig er det et enkelt document.write(), bortset fra at vi fortæller dokumentet at det skal gøre det i dokumentet der ligger i højre frame. Der er også et par andre linier som er nødvendige, når man skriver til et vindue (eller en frame). Vi skal først clear() det, derefter skal vi open() det, derefter skal vi write() til det og så skal vi close() det. Vi er ikke helt færdige endnu. Vi skal lave et link som kalder funktionen. Genåbn left.html og tilføj følgende...
Bemærk at vi kalder funktionen ved at sige top.RightWrite(). Hvis vi kun brugte RightWrite() ville browseren søge efter funktionen i det samme document, som det link der kaldte på det. Men da vores funktion befinder sig i det øverste frameset, må vi specificere top.RightWrite(). Måske en smule forvirrende, men ikke alt for svært. Studer eksemplet indtil du har forstået det. Bemærk at vi kun har skrevet "Joe" til document, ikke nogle HTML tags. Hvis du kigger på koden efter framen er skrevet, vil du kun finde "Joe"... ingen <HTML>, <HEAD> eller <BODY> tags. De ting er der kun hvis vi havde skrevet det...
window.rightframe.document.clear();
window.rightframe.document.open();
window.rightframe.document.write("<HTML>");
window.rightframe.document.write("<HEAD><TITLE></TITLE></HEAD>");
window.rightframe.document.write("<BODY>");
window.rightframe.document.write("Joe");
window.rightframe.document.write("</BODY>");
window.rightframe.document.write("</HTML>");
window.rightframe.document.close();
Normalt er det en god ide at skrive et komplet HTML dokument, men her kan vi springe det over for at gøre det mere enkelt. Øvelse: Lav det sidste eksempel om, så det sender en værdi til funktionen fra linket. Tip: Du vil støde på anførelsestegn problemet igen, selvom det denne gang er en smule anderledes. Dette kan ordnes ved at bruge et enkelt anførelsestegn (') for værdien du ønsker at overfør...
<A HREF="javascript:top.RightWrite('Frank')">Klik her</A>
Selvom browseren er forvirret af nestede anførelsestegn, kan den håndtere et sæt af enkelt anførelsestegn inden i et sæt dobbelt anførelsestegn. Øvelse: Få en promptboks til at komme frem og spørge efter et navn (eller lignede), som derefter skriver det input til den højre frame. Øvelse: Udvid din sidste øvelse så den ikke kun spørger efter brugerens navn, men også får flere prompt bokse til at komme frem og som spørger efter alder og en hex baggrundsfarve (f.eks. 33CC99). Genskriv den højre frame så den siger noget i retning af "Poul er 22 år gammel", og få dokumentet til at gengive den valgte baggrundsfarve (gør det ved at skrive et BODY tag, og ikke bare ved at ændre farven via javaScript). Mens du er igang så indsæt en standard farve i prompt boksen på denne måde. Øvelse: Istedet for at få prompt bokse frem, så brug et enkelt skema med 3 input bokse og en knap. Når du trykker på knappen, er værdierne "stumper" fra input'ne og brugt til at genskrive den højre frame. Være ihærdig med denne her. Den benytter flere af de ting vi har lært i tidligere lektioner og er ikke så nem som den se ud. Hvis det ikke fungerer, vil du finde spor i de fejlmeddelelser der dukker op. Tip: Jeg synes at de fejlmeddelelser Netscape viser, er betydelig bedre end dem Internet Explorer viser. Personligt bruger jeg Netscape til at oprette sider, og bagefter kontrollerer jeg sider og scripts i Explorer. Bliv ved indtil du er færdig med denne øvelse og få den til at fungere som forventet (Selvom det tager tre dage!). Noget af den mest brugbare og intensive indlæring er når du kæmper med et problem. Det minder mig om en linie fra Dog Day Afternoon... "Can't you see I'm dyin' over here?" Den bedste indlæring foregår når du er "dyin'". Øvelse: Ved at bruge simpel matamatik i script, skal du beregne, hvor mange timer gammel brugeren er, og tilføje det til din side re-write. Noget lignende "Det er over 1000 timer gammel!"
|
||||||||||||||||||||||||