JavaScript Hilfe

Waegi · 08.06.2012

Hallo,

ich bin zur Zeit dabei JavaScript zu lernen, arbeite dabei mit einem Tutorial von www.html-seminar.de und habe jetzt das Problem, dass ich immer folgenden Fehler von der Firebug-Konsole bekommen:

document.getElementsByTagName("h1").style is undefined

Hierzu noch das Script:

Code:

<!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" xml:lang="de" lang="de">

<head>
    <title>JavaScript</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />


    <h1>JavaScript Kurs f&uuml;r Einsteiger</h1>
    <p>JavaScript lernen einfach gemacht ...</p>

    <script type="text/javascript">
        document.getElementsByTagName('h1').style.backgroundColor ='orange';
    </script>

</head>

<body>


</body>
</html>

Ich weß leider nicht wovon das kommt, hab shcon einiges probiert, am Anfang hatte ich HTML 5.0 drin, habs dann auf HTML 1.0 Transitional geändert, hat nichts gebracht. Ich hoffe mir kann jemand helfen.

mfg Waegi

Tr3icio · 08.06.2012

AW: JavaScript Hilfe

1. im <head> Bereich darf es keine visuellen Tags geben. (Alles was der User sieht)
2. Empfehle ich dir UTF-8, ISO-8859-1 ist eigentlich schon längst veraltet
3. Nimm lieber HTML5 (nicht die standard Vorlage von Dreamweaver, etc.)
4. Es heißt nicht umsonst getElementsbyTagName. Du bekommst eine DOMNodeList zurück, welche du wie einen Array ansprichst.
5. Die HTML Version hat nichts mit Javascript zu tun

Richtig wäre:

HTML:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8" />

        <title>JavaScript</title>
    </head>

    <body>
        <h1>JavaScript Kurs f&uuml;r Einsteiger</h1>
        <p>JavaScript lernen einfach gemacht ...</p>
    </body>

    <script>
        document.getElementsByTagName('h1')[0].style.backgroundColor = 'orange';
    </script>
</html>

Waegi · 08.06.2012

AW: JavaScript Hilfe

1. Was genau meinst du? Wenn du das mit den h1 und p Tags meinst, das hab ich schonmal davor dort oben drin gehabt, da hat alles funktioniert
2. Ja das hatte ich vorher drin, da hatte ich auch HTML 5 drin, hab ich ja geschrieben, hab es zum testen mal geändert
4. Das getElemtensbyTagName hab ich doch gemacht, das s ist bie mir da, meinst du dass ich dann noch dne Index angeben muss.
5. Versteh ich nicht ganz, was du da meinst?

Ok jetzt funktioniert es, danke. doch warum den Script-Teil unter den body-Bereich? Bisher hab ich das immer nur im Headbereich gesehen?

Mfg Waegi

sokie · 08.06.2012

AW: JavaScript Hilfe

4, was die collection der 'h1' angeht musst du vielleicht noch einmal genauer hinlesen. es ging nicht um das 's' bei getElementsByTagName, sondern darum dass es darauf hinweist, dass eben nict nur ein element explizid ausgewählt wird sondern eine Sammlung von Nodes (die in diesem speziellen Fall nur ein element beinhaltet). Deshalb musst du aber trotzdem mit [0] das Element direkt auswählen um es zu formatieren.

Das script muss deshalb zumindest nach dem html des body notiert werden, damit es das Element H1 und P überhaupt schon gibt, wenn das script ausgeführt wird. im Head würde das script beide Elemente nicht finden können.
Es geht vielmehr um die beiden html Elemente h1 und p, die nicht im head notiert werden dürfen.

Waegi · 08.06.2012

AW: JavaScript Hilfe

Aja ok, vielen Dank für deine Antwort, habs jetzt voll verstanden, wie ihr das meint, haben die dann auf der Seite falsch erklärt, fällt sowieso auf, dass dort viele Rechtschreibefehler sind, werde mich mal nach anderen Tutorials umschauen, habt ihr dort Empfehlungen für Seiten mit Tutorials?

Mfg Waegi

simonpicos · 08.06.2012

AW: JavaScript Hilfe

Waegi schrieb:
1. Was genau meinst du? Wenn du das mit den h1 und p Tags meinst, das hab ich schonmal davor dort oben drin gehabt, da hat alles funktioniert

Ist aber falsch. Bestimmte Browser (z.b. IE) machen da gerne mal Probleme.

Waegi · 08.06.2012

AW: JavaScript Hilfe

Mir kam das schon im Tutorial komisch vor, doch ich hab das einfach mal so geglaubt, doch wie wird das sonst gemacht, meist wird ja ein externes Script im head eingebunden, wie wird das dann gemacht, wenn ein Objekt aus dem body verwendet wird.

Meine Frage nach Tutorials bleibt weiterhin stehen, denn in dem Kurs wurde relativ wenig erklärt, wie ich finde.

Mfg Waegi

sokie · 08.06.2012

AW: JavaScript Hilfe

Waegi schrieb:
...meist wird ja ein externes Script im head eingebunden, wie wird das dann gemacht, wenn ein Objekt aus dem body verwendet wird.

in vielen, wenn nicht in den meissten Fällen will man ja die elemente manipulieren, die im 'body' notiert sind. Daraus ergibt sich natürlich die notwendigkeit zu warten bis der body eben geladen ist, dieses ereignis ("body geladen") kann man im body tag abfangen zB <body onload="machwas"> wobei das "machwas" im scriptbereich im "head" beschreiben werden muss.

um aber die tags im body nicht mit programm zu füllen, sondern beides getrennt zu halten kann man seine programmierung im head so anlegen, dass sie erst ausgeführt wird, wenn zB. alles geladen ist:

Code:

<script type="text/javascript">
   window.onload = function(){
     document.getElementsByTagName('h1')[0].style.backgroundColor = 'orange';
   }

</script>

so ist sichergestellt, dass das h1 tag im body tatsächlich schon existiert, bevor man darangeht es zu selektieren und zu manipulieren.

hier gibt es im bereich Web Javascript einige Tutorials.
zum strukturieten Einstieg ist vielleicht ein Buch wie zB http://openbook.galileocomputing.de/javascript_ajax/ (kostenlos online lesen oder herunterladen) eine gute Sache.

Waegi · 09.06.2012

AW: JavaScript Hilfe

Hallo,

Danke für deine Antwort, ich werd mich dort mal umschauen, hatte zwar mal ein Buch von meinem Bruder, das war jedoch alles etwas abgehackt erklärt und so, das mit dem Scriptschnipsel versteh ich noch ned ganz wofür steht das window.onload? Fräg das das ganze ab, ich bin ein richtiger Neuling in dem Bereich.

Mfg Waegi

sokie · 09.06.2012

AW: JavaScript Hilfe

solche Dinge findest du zB hier http://openbook.galileocomputing.de...lung_001.htm#707cf1902f4a51fd95047fec1d5704a0 in dem genannten Buch ausführlich erklärt.

Tr3icio · 09.06.2012

AW: JavaScript Hilfe

window.onload ist ein Event*.
Sobald die gesamte Seite mit allen Bildern geladen wurde, wird dieses aufgerufen. (Die Funktion wird ausgeführt).

Sollte man aber nur auf den DOM warten, reicht ein document.addEventListener("DOMContentLoaded", callback); völlig aus. (Oder ein readystatechange für ältere Browser)

*Falls du es noch nicht hattest: Events sind Ereignisse, z.B. ein Klick auf ein Element, welcher dann eine Funktion aufruft, die du vorher festgelegt hattest.

Waegi · 09.06.2012

AW: JavaScript Hilfe

Ok, dannn mal dankeschön, ich werde mir das Buch mal online ansehen ist ja möglich hier, und mich mal ducharbeiten. Vielen Dank für euere Tipps, wenn ich nochmal Fragen habe, melde ich mich einfach nochmal.

mfg Waegi