|
|
 | Visning af billede vha. af Javascript og X~
Fra : Steffen Jespersen |
Dato : 05-12-10 14:22 |
|
Hej Folkens!
Jeg har et lille problem. Jeg har rodet lidt med noget data
udtræk fra et xml-dokument vha. af Javascript. Det virker fint
nok, men jeg kan ikke finde ud af at få vist stien til et billede
som et billede. Nogen der kan hjælpe?
Jeg har prøver at få flettet et html img tag ind i koden, men
uden held.
Min kode:
<html>
<body>
<script type="text/javascript">
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","test.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("movie");
for (i=0;i<x.length;i++)
{
document.write("<tr><td>");
document.write(x[i].getElementsByTagName("title")[0].childNodes[0
].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("image")[0].childNodes[0
].nodeValue);
document.write("</td></tr>");
}
document.write("</table>");
</script>
</body>
</html>
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
 Birger Sørensen (05-12-2010)
| Kommentar
Fra : Birger Sørensen |
Dato : 05-12-10 15:23 |
|
Steffen Jespersen kom med følgende:
> Hej Folkens!
>
> Jeg har et lille problem. Jeg har rodet lidt med noget data
> udtræk fra et xml-dokument vha. af Javascript. Det virker fint
> nok, men jeg kan ikke finde ud af at få vist stien til et billede
> som et billede. Nogen der kan hjælpe?
>
> Jeg har prøver at få flettet et html img tag ind i koden, men
> uden held.
>
> Min kode:
> <html>
> <body>
>
> <script type="text/javascript">
> if (window.XMLHttpRequest)
> {// code for IE7+, Firefox, Chrome, Opera, Safari
> xmlhttp=new XMLHttpRequest();
> }
> else
> {// code for IE6, IE5
> xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
> }
> xmlhttp.open("GET","test.xml",false);
> xmlhttp.send();
> xmlDoc=xmlhttp.responseXML;
>
> document.write("<table border='1'>");
> var x=xmlDoc.getElementsByTagName("movie");
> for (i=0;i<x.length;i++)
> {
> document.write("<tr><td>");
>
> document.write(x[i].getElementsByTagName("title")[0].childNodes[0
> ].nodeValue);
> document.write("</td><td>");
>
> document.write(x[i].getElementsByTagName("image")[0].childNodes[0
> ].nodeValue);
> document.write("</td></tr>");
> }
> document.write("</table>");
> </script>
>
> </body>
> </html>
Hvad får du på skærmen?
Umiddelbart er din AJAX vist godt nok - men hvorfor rode en tabel ind i
det?
Og det er gris at have script i body delen. Det bør laves i en onload
på window. Du skal så indsætte elementerne gennem DOM i stedet.
Desuden mangler både doctype, <head> og <title> i ovenstående. Så det
kommer ikke til at opfylde nogen former for standarder.
Jeg mangler et eksempel fra din xml fil, for at kunne afgøre resten.
Evt. kan du sæte nogle linier ind, der udskriver nogle af variablene -
det kan bruges til at fejlfinde.
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Steffen Jespersen (05-12-2010)
| Kommentar
Fra : Steffen Jespersen |
Dato : 05-12-10 15:35 |
|
Ja jeg ved godt der er nogle fejl og mangler :) Har ikke lagt så meget
arbejde i det. Skulle bare se, hvordan jeg kunne få trukket data ud fra
xml-dokumentet.
xml:
<movies>
<movie>
<title>Superman</title>
<image>billede.png</image>
</movie>
<movie>
<title>Gladiator</title>
<image>billede.png</image>
</movie>
</movies>
Ouput:
http://saftig-kokus.dk/xml/
Birger Sørensen wrote in dk.edb.internet.webdesign.clientside:
> Steffen Jespersen kom med følgende:
> > Hej Folkens!
> >
> > Jeg har et lille problem. Jeg har rodet lidt med noget data
> > udtræk fra et xml-dokument vha. af Javascript. Det virker fint
> > nok, men jeg kan ikke finde ud af at få vist stien til et billede
> > som et billede. Nogen der kan hjælpe?
> >
> > Jeg har prøver at få flettet et html img tag ind i koden, men
> > uden held.
> >
> > Min kode:
> > <html>
> > <body>
> >
> > <script type="text/javascript">
> > if (window.XMLHttpRequest)
> > {// code for IE7+, Firefox, Chrome, Opera, Safari
> > xmlhttp=new XMLHttpRequest();
> > }
> > else
> > {// code for IE6, IE5
> > xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
> > }
> > xmlhttp.open("GET","test.xml",false);
> > xmlhttp.send();
> > xmlDoc=xmlhttp.responseXML;
> >
> > document.write("<table border='1'>");
> > var x=xmlDoc.getElementsByTagName("movie");
> > for (i=0;i<x.length;i++)
> > {
> > document.write("<tr><td>");
> >
> > document.write(x[i].getElementsByTagName("title")[0].childNodes[0
> > ].nodeValue);
> > document.write("</td><td>");
> >
> > document.write(x[i].getElementsByTagName("image")[0].childNodes[0
> > ].nodeValue);
> > document.write("</td></tr>");
> > }
> > document.write("</table>");
> > </script>
> >
> > </body>
> > </html>
>
> Hvad får du på skærmen?
> Umiddelbart er din AJAX vist godt nok - men hvorfor rode en tabel ind i
> det?
> Og det er gris at have script i body delen. Det bør laves i en onload
> på window. Du skal så indsætte elementerne gennem DOM i stedet.
> Desuden mangler både doctype, <head> og <title> i ovenstående. Så det
> kommer ikke til at opfylde nogen former for standarder.
>
> Jeg mangler et eksempel fra din xml fil, for at kunne afgøre resten.
> Evt. kan du sæte nogle linier ind, der udskriver nogle af variablene -
> det kan bruges til at fejlfinde.
>
> Birger
>
> --
> http://varmeretter.dk - billig, sund og hurtig mad
> http://bbsorensen.dk
>
>
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
| |
 Birger Sørensen (05-12-2010)
| Kommentar
Fra : Birger Sørensen |
Dato : 05-12-10 15:45 |
|
Efter mange tanker skrev Steffen Jespersen:
8X
I stedet for
document.write(x[i].getElementsByTagName("image")[0].childNodes[0
].nodeValue);
skriver du
document.write( '<img
src="'+x[i].getElementsByTagName("image")[0].childNodes[0].nodeValue+'">');
<img mangler så alt og title iht. standarderne - men det gør nok ikke
den store forskel...
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Rune Jensen (06-12-2010)
| Kommentar
Fra : Rune Jensen |
Dato : 06-12-10 11:04 |
|
Birger Sørensen wrote:
> <img mangler sￜ alt og title iht. standarderne - men det gￜr nok ikke
> den store forskel...
Birger, jeg er selv lidt interesseret i det her med JS, så kan du
hjælpe mig med at fortælle om følgende er sandt? Du er jo den eneste
tilbage i grupperne efterhånden som ved hvad javascript er ;)
1. for (i=0;i<x.length;i++)
Dette vil trigge en test af x.lenght for hver gang løkken gennemløbes,
og det er langsomt. I stedet bør det læsgges i en (lokal) vaiabel, da
x.lenght vil være den samme hver gang. Yderligere vil man kunne
optimere ved at gennemløge imod nul i stedet.
2. Document.write gennemtvinger reflow, fordi det ændrer i
dpokumentet, derfor er det i princippet langsomt. Man lægger som regel
scripts, som direkte ændrer indhold så sent i dokumentet som muligt,
eller man sørger for at bruge en onload, som sørger for det først
udføres, når siden er hentet. Det er for at nedsætte antallet af
reflows. Jeg ved ikke, om hver document.write gennemtvinger reflow,
men i så fald kan det betale sig at lægge det i frament og ændre det
udenfor siden og så indsætte det færdige resultat bagefter.
Sandt eller falsk?
MVH
Rune Jensen
| |
Birger Sørensen (06-12-2010)
| Kommentar
Fra : Birger Sørensen |
Dato : 06-12-10 20:23 |
|
Rune Jensen udtrykte præcist:
> Birger Sørensen wrote:
>
>> <img mangler s� alt og title iht. standarderne - men det g�r nok ikke
>> den store forskel...
>
> Birger, jeg er selv lidt interesseret i det her med JS, så kan du
> hjælpe mig med at fortælle om følgende er sandt? Du er jo den eneste
> tilbage i grupperne efterhånden som ved hvad javascript er ;)
>
> 1. for (i=0;i<x.length;i++)
> Dette vil trigge en test af x.lenght for hver gang løkken gennemløbes,
> og det er langsomt. I stedet bør det læsgges i en (lokal) vaiabel, da
> x.lenght vil være den samme hver gang. Yderligere vil man kunne
> optimere ved at gennemløge imod nul i stedet.
x.length er ikke nødvendigvis den samme hver gang. Det kommer an på
hvad man foretager sig i for-løkken.
Men det er rigtigt, at betingelsen checkes hver gang.
Man kan måske spare lidt tid, ved at lægge x.length i en variabel (som
så i virkeligheden er en konstant..), så x.length ikke skal evalueres
hver gang. Men man skal nok op i nogle store arrays, hvis det skal
kunne måles.
for (i=x.length-1; i>-1; i--)
gør det samme - forudsat arrayet ikke ændres i løkken. Igen tvivler jeg
på at det er meget hurtigere.
Og man vil som oftest skulle brug x[i] til et eller andet - og det er
ikke givet, at man bare kan vende rækkefølgen på hovedet.
> 2. Document.write gennemtvinger reflow, fordi det ændrer i
> dpokumentet, derfor er det i princippet langsomt. Man lægger som regel
> scripts, som direkte ændrer indhold så sent i dokumentet som muligt,
> eller man sørger for at bruge en onload, som sørger for det først
> udføres, når siden er hentet. Det er for at nedsætte antallet af
> reflows. Jeg ved ikke, om hver document.write gennemtvinger reflow,
> men i så fald kan det betale sig at lægge det i frament og ændre det
> udenfor siden og så indsætte det færdige resultat bagefter.
>
> Sandt eller falsk?
^^
Her melder jeg pas. Jeg bruger aldrig document.write().
Men jeg mener ikke der foretages reflow af dokumentet, før
document.close() kaldes.
Man skal vel også være opmærksom på at DOM level 2, foreskriver at der
skal kaldes document.open() før man kan write() - og open() fjerner
faktisk eksisterende indhold. Også at i hvert fald Mozilla specificerer
at brugaf document.write() uden et kald til document.open() først, vil
give et implicit kald til document.open(). Man kan altså ikke bruge
document.write() til at tilføje til en eksisterende side.
[
Jeg har set eksempler som
document.write( '<h1>Hej Verden - her er jeg!</h1>');
Hvorfor? - hvis man ved hvad der skal stå, hvorfor indsætter man det så
ikke bare i body?
Hvis man ikke ved hvad der skal stå, bruger man AJAX til at hente de
manglende bidder, og her kan man ikke bruge document.write() - der skal
anveds DOM
]
Jeg skal ikke påstå at man aldrig har brug for document.write() - men
man bør undgå den så vidt muligt - og det er altid muligt.
Om ikke for andet så for adskillelsen i koderne : HTML,
præsentation(CSS) og funktionalitet(scripting).
Det kan være, det kræver lidt tilvænning, men det er i længden også
mere overskueligt.
En onload som du foreslår, og DOM funktioner til at behandle elementer.
Jeg har ikke målt, men erfaringen siger mig at det også er hurtigere
(omend kodningen i visse tilfælde er lidt mere omfattende), muligvis
fordi det kun er de dele af dokumentet der ændres, der også reflowes.
Jeg opfatter steffens eksempel, som rent eksperiment, der har til
formål, udelukkende at teste koden til dechifrering af xml-filen, og
ikke som et endeligt dokument.
Håber det tilfredsstiller din videbegærlighed 
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Rune Jensen (06-12-2010)
| Kommentar
Fra : Rune Jensen |
Dato : 06-12-10 11:23 |
|
Rune Jensen wrote:
> Sandt eller falsk?
Der er også dette:
document.write(x[i].getElementsByTagName("title")[0].childNodes[0
].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("image")[0].childNodes[0
].nodeValue);
Jeg har kun hørt om fragment*), men hvis man laver alle ændringer
udenfor dokumentet og først til sidst indsætter ændringerne, bør det
vel være hurtigere.
Min inspiration er taget herfra, og en advarsel, den er ret lang:
http://www.youtube.com/watch?v=mHtdZgou0qU
Han taler om fragment og reflow omkring 31:47
*) Jeg fandt denne
http://reference.sitepoint.com/javascript/Document/createDocumentFragment
MVH
Rune Jensen
| |
Birger Sørensen (06-12-2010)
| Kommentar
Fra : Birger Sørensen |
Dato : 06-12-10 21:14 |
|
Rune Jensen sendte dette med sin computer:
> Rune Jensen wrote:
>
>> Sandt eller falsk?
>
> Der er også dette:
>
> document.write(x[i].getElementsByTagName("title")[0].childNodes[0
> ].nodeValue);
> document.write("</td><td>");
> document.write(x[i].getElementsByTagName("image")[0].childNodes[0
> ].nodeValue);
>
> Jeg har kun hørt om fragment*), men hvis man laver alle ændringer
> udenfor dokumentet og først til sidst indsætter ændringerne, bør det
> vel være hurtigere.
>
> Min inspiration er taget herfra, og en advarsel, den er ret lang:
> http://www.youtube.com/watch?v=mHtdZgou0qU
> Han taler om fragment og reflow omkring 31:47
>
>
> *) Jeg fandt denne
> http://reference.sitepoint.com/javascript/Document/createDocumentFragment
>
>
> MVH
> Rune Jensen
Et par gode link Rune 
Selvom jeg hoppede til dit index og altså sprang den første halve time
over.
Man må vel gå ud fra, at manden taler sandt.
Hvis man nu tager steffens kodestump som eksempel, er der temmelig
mange reflows i det - en når tabellen skrives, og for hver film een når
der indsættes tr, og 2 gange mere - en for hver td. Altså i alt 3
reflows for hver film.
Jeg ville i DOM oprette en tabel udenfor dokumentet, indsætte tr'er for
hver film og i den indætte en td for titlen og en td for billedet.
Efter gennemløbet, ville jeg så indsætte tabellen i body. Det giver eet
reflow, når tabellen indsættes.
Hvis man går til hans side nu
http://saftig-kokus.dk/xml/
Kan man se at han har ændret, og faktisk indsætter en div for hver film
(Men billederne kan åbenbart ikke findes. Hvorfor div'erne stadig
indsættes i en tabel? - vi må vel antages at der arbejdes med det
).
Men det giver faktisk også tre reflows for hver film, fordi der bruges
document.write.
I DOM ville jeg umiddelbart oprette div'en udenfor dokumentet, indsætte
tekst og billeder, og så indsætte div'en i body.
Det giver een reflow for hver film.
Og hvis der så var rigtig mange film, ville jeg overveje enten at sætte
dem alle sammen i yderlige en div, som kunne indsættes, og give eet
reflow, eller at oprette et DocumentFragment, at indsætte de enkelte
div'er i, for til sidst at indsætte fragmentet i body. Begge dele vil
også give een reflow.
Når det så er sagt, tror jeg altså der skal rigtig mange film til at
man kan se forskellen.
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
Rune Jensen (07-12-2010)
| Kommentar
Fra : Rune Jensen |
Dato : 07-12-10 00:21 |
|
Birger Sørensen wrote:
> Rune Jensen sendte dette med sin computer:
> Man må vel gå ud fra, at manden taler sandt.
Han har arbejdet for Yahoo i deres optimeringsteam. Er der nogen, som
ved noget om optimering, er det Yahoo. Det må Google vel også have
indset, eftersom de hijackede ham ;)
> Hvis man nu tager steffens kodestump som eksempel, er der temmelig
> mange reflows i det - en når tabellen skrives, og for hver film een når
> der indsœttes tr, og 2 gange mere - en for hver td. Altså i alt 3
> reflows for hver film.
Jeg er glad for, du ved hvad han taler om. Jeg har ikke hørt om
createdocumentfragment, før jeg så den video jeg har set den 4
gange).
> Jeg ville i DOM oprette en tabel udenfor dokumentet, indsœtte tr'er for
> hver film og i den indïœtte en td for titlen og en td for billedet.
> Efter gennemløbet, ville jeg så indsœtte tabellen i body. Det giver eet
> reflow, når tabellen indsœttes.
Det svarer så til, hvad je har forstået. I så fald kan det være, jeg
har selvstændige spørgsmål senere (i nye indlæg).
<SNIP: udskiftning af indhold uden for dokumentet>
> Når det så er sagt, tror jeg altså der skal rigtig mange film til at
> man kan se forskellen.
I dette tilfælde har du nok trods alt ret. Men man kan forestille sig,
at Steffen vil gøre siden mere javascrippt intensiv, og så begynder
man formodentlig at kunne se det.
Mit formål med mine indlæg er, at jeg kan jo se, javascript, og -
libraries bliver brugt mere og mere, og i fremtiden vil det blive
meget mere, for HTML5 introdicerer en masse guf clientside.
Derfor mener jeg, det er på tide, vi hander udfra det, og så begynder
at lære folk best practices i javascript på samme måde som f.eks. HTML
(hvor jeg i steffens tilfælde også ville bruge en DIV, ikke en tabel).
Lad os antage, at man har en form med en drop down, og hvert valg
ændrer en masse ved DOM. En sådan side kan opfattes som en
applikation, og her skal reaktionstiden være mindre end 0.1 sekund ved
indholdsopdatering, ellers bliver en bruger irriteret.
Andre kan være mobiler, hvor man kan forlænge batterilevetiden ved at
kode javascript korrekt. AJAX-sider, som opdateres ved en timer,
tabelsorteringsrutiner via JS, eller bare meget javascript intensive
sider. Det er IE8 og 7, som er problemet, for de har ikke en speciel
javascript-engine, og dem vil vi leve med mange år endnu. Rent
statistisk omkring 8 år...
Til sidst, så håber jeg du bliver i gruppen, Birger, ellers tror jeg
det går ad H til hvad javascript angår herinde. Hvis nyhedsgrupperne
skal overleve, er det ultravigtigt, der er nogen, som kan deres kram
til at besvare.
MVH
Rune Jensen
| |
Rune Jensen (07-12-2010)
| Kommentar
Fra : Rune Jensen |
Dato : 07-12-10 00:42 |
|
Rune Jensen wrote:
> Birger Sørensen wrote:
> <SNIP: udskiftning af indhold uden for dokumentet>
> > Når det så er sagt, tror jeg altså der skal rigtig mange film til at
> > man kan se forskellen.
>
> I dette tilfælde har du nok trods alt ret. Men man kan forestille sig,
> at Steffen vil gøre siden mere javascrippt intensiv, og så begynder
> man formodentlig at kunne se det.
Det er lidt irriterende, at manden taler om procent-forskelle i
hastighed, uden at opgive de reelle tal. Så er det svært at vurdere,
hvor meget betydning det har.
Men jeg ville måske foreslå, hvis man er interesseret i sine siders
hastighed, at man tester med Firebug og Pagespeed. I Firebug kan man
se, hvor mange gange, der trigges en reflow, og hvor meget det koster.
Så kan man formodentlig også se, om det er nødvendigt at optimere.
Bortset fra det, så det med best practices: Hvis den kode man laver,
kan laves optimeret med samme læsbarhed eller bedre, så mener jeg
bestemt man skal bruge den optimerede metode under alle omstændigeder.
Det er også noget med at få de rigtige vaner ind fra start.
MVH
Rune Jensen
| |
Birger Sørensen (07-12-2010)
| Kommentar
Fra : Birger Sørensen |
Dato : 07-12-10 10:45 |
|
Rune Jensen formulerede spørgsmålet:
> Rune Jensen wrote:
>> Birger Sørensen wrote:
>
>> <SNIP: udskiftning af indhold uden for dokumentet>
>>> Når det så er sagt, tror jeg altså der skal rigtig mange film til at
>>> man kan se forskellen.
>>
>> I dette tilfælde har du nok trods alt ret. Men man kan forestille sig,
>> at Steffen vil gøre siden mere javascrippt intensiv, og så begynder
>> man formodentlig at kunne se det.
>
> Det er lidt irriterende, at manden taler om procent-forskelle i
> hastighed, uden at opgive de reelle tal. Så er det svært at vurdere,
> hvor meget betydning det har.
>
> Men jeg ville måske foreslå, hvis man er interesseret i sine siders
> hastighed, at man tester med Firebug og Pagespeed. I Firebug kan man
> se, hvor mange gange, der trigges en reflow, og hvor meget det koster.
> Så kan man formodentlig også se, om det er nødvendigt at optimere.
>
> Bortset fra det, så det med best practices: Hvis den kode man laver,
> kan laves optimeret med samme læsbarhed eller bedre, så mener jeg
> bestemt man skal bruge den optimerede metode under alle omstændigeder.
> Det er også noget med at få de rigtige vaner ind fra start.
>
>
>
> MVH
> Rune Jensen
Ja - nogle reelle tider ville være rare. Men det er formentlig fordi de
faktiske tider vil være meget forskellige, da de afhænger af det
aktuelle indhold af den side, det handler om. Så måske vil absolutte
tider give et forkert indtryk.
Jeg har ikke hørt om Pagespeed, men jeg vil se på den. Ikke lige nu,
for jeg har ret travlt.
DocumentFragment er ny i DOM levl 3. Og jeg skal da være ærlig og sige
at jeg har heller ikke set den anvendt før. Men den har da klart sin
berettigelse.
Jeg plejer at bruge eksisterende elementer, som jeg fjerner og
indsætter igen, hvis det har været muligt.
DocumentFragment er principielt samme object som Document elementet -
har altså de samme egnskaber. Men det har ikke samme krav til
opbygningen som Document (Document objektet svarer til <html> tagget,
og kan kun have eet HTML element (<body>) på top niveau -
DocumentFragment kan have flere, og de behøver ikke være block
elementer som body er. Du kan altså godt oprette et DocumentFragment,
med 4 tekster i f.eks.). DocumentFragment kan så til gengæld ikke
indsættes i andre elementer, som det også siges i videoen. Gør man det,
indsættes automatisk alle de elementer som DocumentFragment indeholder
i stedet.
Jeg er helt med dig i, at det handler om at være konsekvent, og at få
opbygget vaner der giver fornuftig kode.
Optimering er en vanskellig disciplin - eller kan i hvert fald være for
nogen, for man har tit ikke lyst til at ændre sin kode når den først
virker. Og det er også vanskeligt at vide hvad det kan betale sig at
gøre noget ved - og hvordan, hvis man render ind i noget, der er for
sløvt.
Jeg har ikke tænkt mig at rende nogen steder lige med det samme.
Og jeg er heller ikke specielt JS specialist - men jeg ved en del om
programmering, også i andre sprog, uden at jeg på nogen måde betragter
mig som ekspert.
Og jeg bidrager gerne, med ting jeg mener at vide noget om.
Så har du spørgsmål, skyder du bare - ligesom alle de andre
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
| |
|
|