Øvelser fra dag 2.
Upload løsninger til webhotel (Freehostia.com )
The Missing Manual: Chapter 5, Dynamically Modifying Web Pages (DOM) side 155-175
JavaScript kernen består af det område inden for sproget som det i hovedsagen strukturelt set deler med andre programmeringssprog. Det består af elementer som:
Dokument objekt modellen (DOM) består af et hierarki browserspecifikke objekter som:
Dokument Objekt Modellen (DOM) er hierarkisk dvs. brower vinduet (Window objektet) indeholder bl.a. historie, location og document objektet. Document objektet indholder elementerne i et html dokument dvs. en samling/array af links, forms, images og anchors(lokale links). Form objektet indholder igen f.eks. text, buttons, radio input elementer.
JavaScript kernen og DOM kan tænkes uafhængigt af hinanden. Man kan fx forestille sig JavaScript kernen anvendt til andre formål.
Man kan forestille sig DOM komponenterne forbundet med andre sprog en javascript. Det er fx tilfældet for Internet Explores vedkommende, hvor dokumentobjekterne i denne browser også kan programmeres med VBScript (VisualBasic Script).
DOM betyder bl.a., at JavaScript programmøren har mange præfabrikerede komponenter til sin rådighed også kaldt et API (Application Programmers Interface). Uden disse browserbaserede objekter måtte programmøren selv bygge objekterne op fra grunden. Situationen svarer lidt til at gå i en hobbyforretning og fx købe et samlesæt til et modelfly, frem for selv at opbygge de enkelte dele fra grunden. Mens programmøren tidligere typisk byggede det hele op selv, har JavaScript programmøren allerede en lang række komponenter (DOM) til sin rådighed.
Vi har allerede brugt følgende objekter fra window objektet.
Dokument objektet er en hierarkisk model af det aktuelle HTML-dokument.
Figur 1.3: Hierarki af DOM objekter (kilde: Yanks & Adams: Simply JavaScript. SitePoint 2007)
Når man refererer til det enkelte objekt (element) gøres det nemmest ved at give objektet en unik id. f.eks. <h1 id="vigtig">Hello</h1> eller
<input type="text" name="kundenavn" id="kundenavn" value="Indtast dit navn " / >
document.getElementById("kundenavn")
man kan også referere til et tag via
document.getElementByTag("h1");
eller via dot syntaks.
window.document.body.h1;
<form id="bestilling">
<input type="text" name="kundenavn" id="kundenavn" value="Indtast dit navn " / >
<input type="button" onclick="visInput();" value="click" />
</form>
<script type="text/javascript">
function visInput(){
alert("Yo "+document.getElementById('kundenavn').value);
}
</script>
Tekstfelt objektet med id-værdien (instansnavn) kundenavn har egenskaben value. Den bliver aflæst ved at angive egenskabens navn umiddelbart efter objektreferencen.
Vi kunne også med JavaScript have ændret værdien af indtastningsfeltets kundenavn og selektere (markere) indtastningsfeltet efter alert boksen er vist:
function visInput(){
alert("Yo "+document.getElementById('kundenavn').value);
document.getElementById('kundenavn').value = "Indtast nyt navn";
document.getElementById('kundenavn').select();
}
Exercises
Ex.1 Gå sammen to og to og tal om hvordan følgende html dokument fungere i Browseren. Function repetition
Ex. 2 String, Array øvelser.
a. Lav et JavaScript der finder ud af hvormange t'er der er i teksten 'There are times when you want to know how many chararcters are in a string.'
b. Hvad kan man bruge indexOf( ) metoden til. Lav et eksempel.
c. Lav en array som indeholder ugenavnene i en dansk uge . Lav en løkke som udskriver ugedagene i browseren.
EX.2_UI = User Interface
a. Lav en html form med et textarea hvor brugeren kan indtaste eller paste en tekst, og en button som kalder en funktion der beregner antal t'er i textarea'et.
Hint's:
document.getElementsById("tekstFelt").value,
<textarea name="tekst" cols="100" rows="10" id="tekstFelt">There are times when you want to know how many chararcters are in a string.</textarea>
b. Lav en html form som taget et tekst input og tester om teksten indeholder @.
c. Lav en array som indeholder ugenavnene i en dansk uge . Lav en løkke som udskriver ugedagene i en tabel browseren.
| Index | Ugedag |
| 0 | Mandag |
| 1 | Tirsdag |
| 2 | Onsdag |
| 3 | Torsdag |
| 4 | Fredag |
| 5 | Lørdag |
| 6 | Søndag |
Ex.3 Tutorial: The Moon Quiz Revisited (p.164 )
Central elements: id attribute, function doQuiz( ) , window.onload = doQuiz (events)
var results = document.getElementById('quizResults');
results.innerHTML = message;
En passende URL vil være webadressen til dag1 og dag2 opgaverne med links til dine løsningsforslag.
Hand's on dag 3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<script type="text/javascript">
function taelAntalT(){
// definition af variable
var input = document.getElementById("tekstfelt1").value;
var antalT = 0;
for (i=0; i<input.length;i++){
if( input.charAt(i) == "t" || input.charAt(i) == "T"){
antalT++
}
//document.write("<h1>"+i+"</h1>");
}
document.write("antal T'er "+antalT);
}
</script>
<form>
<p>
<textarea name="tekstfelt1" cols="100" rows="10" id="tekstfelt1">Skriv noget tekst</textarea>
</p>
<input type="button" value="antal T'er" onclick="taelAntalT()" />
<p> </p>
</form>
</body>
</html>