nicht angemeldet
Mit Klassen Funktionen einbinden?
suitHallo!
Ich habe ein Problem.
Wie schaffe ich eine Funktion in einem HTML-Dokument durch eine Klasse einzufügen? Also so:
<head>
...
<script>
function calendar() {
das ganze Zeug^^
}
</script>
...
</head>
<body>
<div class="kalender"></div>
</body>
Wie schaffe ich es nun, dass in der Klasse der Kalender angezeigt wird?
-
Hallo!
Ich habe ein Problem.
Wie schaffe ich eine Funktion in einem HTML-Dokument durch eine Klasse einzufügen? Also so:<head>
...
<script>
function calendar() {
das ganze Zeug^^
}
</script>
...
</head>
<body>
<div class="kalender"></div>
</body>Wie schaffe ich es nun, dass in der Klasse der Kalender angezeigt wird?
Also idealerweise nimmt man für sowas eine id wie ich finde. JQuery und Konsorten schaffen es wohl auch ohne id und gehen auf den Klassen Namen.
Eigentlich sieht das was du suchst wie folgt aus:
<div id='kalender'></div>
Im Javascript steht dann sowas:
document.getElementById('kalender').appendChild( erzeugtesHTML );Dieses Ding hier "document.getElementById('kalender')" kannst du wie gesagt je nach benutzter Lib austauschen.
Gruß
appendMessage()
T-Rex-
Hi,
Also idealerweise nimmt man für sowas eine id wie ich finde.
idealerweise benutzt man IDs ausschließlich für bemerkenswert eindeutige Elemente. Wenn in der Seite beispielsweise zwei Kalender stecken können, ist eine ID bereits fehl am Platz.
Eigentlich sieht das was du suchst wie folgt aus:
Interessant, ich habe nämlich nicht verstanden, was die eigentliche Frage ist.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes -
Hallo!
Ich habe ein Problem.
Wie schaffe ich eine Funktion in einem HTML-Dokument durch eine Klasse einzufügen? Also so:<head>
...
<script>
function calendar() {
das ganze Zeug^^
}
</script>
...
</head>
<body>
<div class="kalender"></div>
</body>Wie schaffe ich es nun, dass in der Klasse der Kalender angezeigt wird?
Also idealerweise nimmt man für sowas eine id wie ich finde. JQuery und Konsorten schaffen es wohl auch ohne id und gehen auf den Klassen Namen.
Eigentlich sieht das was du suchst wie folgt aus:
<div id='kalender'></div>
Im Javascript steht dann sowas:
document.getElementById('kalender').appendChild( erzeugtesHTML );Dieses Ding hier "document.getElementById('kalender')" kannst du wie gesagt je nach benutzter Lib austauschen.
Gruß
appendMessage()
T-RexJa erstmal Danke, nur funktioniert es nicht :(
Das ist die ganze Seite:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script language="JavaScript">
function calendar() {
var date=new Date();
var dd=date.getDate();
var mm=date.getMonth();
var yy=date.getYear();
if(yy < 1900)yy+=1900;
document.write("<font size=+2>Kalender für ", mm+1, ".", yy, "</font><br>");
date.setDate(1);
var kk=date.getDay();
if(kk == 0)kk=7;
document.write("<table border>");
document.write("<tr><th>Mo<th>Di<th>Mi<th>Do<th>Fr<th>Sa<th>So</tr>");
document.write("<tr>");
for(var ii=1; ii<kk; ii++) {
document.write("<td>");
}
for(ii=1; ii<32; ii++) {
date.setDate(ii);
if(date.getMonth() != mm)break;
if(ii == dd) {
document.write("<td><b>", ii, "</b>");
} else {
document.write("<td>",ii);
}
kk++;
if(kk > 7) {
document.write("</tr>\n<tr>");
kk=1;
}
}
document.write("</tr></table>");
}
document.getElementById("kalender").appendChild("<script>calendar()</script>");
</script>
</head>
<body>
<span id="kalender"></span>
</body>
</html>Ist ziemlich groß... der Kalender geht nicht.
-
Moin!
Ja erstmal Danke, nur funktioniert es nicht :(
Du darfst kein document.write benutzen. Du musst entweder die HTML-Knoten über die zugehörigen DOM-Funktionen als Baum erzeugen und platzieren, oder mit innerHTML arbeiten.
- Sven Rautenberg
-
Hi,
document.write("<font size=+2>Kalender für ", mm+1, ".", yy, "</font><br>");
document.write() auf ein Dokument ausgeführt, welches bereits abschließend gerendert wurde (also "fertig geladen ist"), führt dazu, dass zunächst document.open() ausgeführt wird. Sprich: Das aktuelle Dokument wird erst mal vernichtet und ist somit weg. Idealerweise streichst Du document.write() aus Deinem Gedächtnis und verwendest ausschließlich DOM-Methoden.
Darüber hinaus möchtest Du auch auf <font> verzichten. Auch das <br> zweifele ich hier an.
document.getElementById("kalender").appendChild("<script>calendar()</script>");
Damit document.getElementById("kalender") etwas Deinen Wünschen entsprechendes liefern kann, muss das Element mit dieser ID bereits existieren. Du definierst es jedoch erst später - es ist also in dieser Zeile noch nicht da. Folge: appendChild() kann nicht angewendet werden, da der Wert null (die Rückgabe von document.getElementById()) keine solche Eigenschaft besitzt => JavaScript-Fehler.
Da spielt es also auch keine Rolle mehr, dass appendChild() eine DOM-Node als Argument erwartet, keinen String. Nebenbei bemerkt musst Du, wenn Du einen JavaScript-Code ausführen möchtest, diesen nicht erst umständlich als String oder Inhalt eines <script>-Elements verpacken - führe ihn einfach zum geeigneten Zeitpunkt aus.
Ist ziemlich groß... der Kalender geht nicht.
"Geht nicht" und "funktioniert nicht" sind übrigens keine Problembeschreibungen. Wenn Fehler nicht so offensichtlich sind wie hier, führen solche Formulierungen lediglich dazu, dass Dir nicht geholfen werden kann. Das ergibt Frust auf beiden Seiten - vermeidbaren Frust. Sei also bitte so gut, ab jetzt Problembeschreibungen beizufügen.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
-
-
Also idealerweise nimmt man für sowas eine id wie ich finde. JQuery und Konsorten schaffen es wohl auch ohne id und gehen auf den Klassen Namen.
Nebst dem Einwand von Cheatah: jQuery liefert eine Selektor-Engine mit (Sizzle) wo man so ziemlich alles auswählen kann, sie ist dabei sogar geringfügig mächtiger als das CSS3-Selektors-Modul. Aber auch ohne Selektor-Engines lassen sich mit DOM-Methoden auch ohne ID entsprechende Element genau selektieren.
getElementsByClassName oder getElementByName sind hier nur triviale Beispiele.
Moderne Browser können z.B. auch mittels XPath entsprechende Elemente im DOM zusammensuchen. Die evaluate-Methode ist Bestandteil von DOM Level 3.
-
getElementsByClassName oder getElementByName sind hier nur triviale Beispiele.
Moderne Browser können z.B. auch mittels XPath entsprechende Elemente im DOM zusammensuchen. Die evaluate-Methode ist Bestandteil von DOM Level 3.
Ein Hinweis auf document.querySelector() und document.querySelectorAll() wäre angebrachter. Damit lassen sich Elemente anhand von CSS-Selektoren auswählen - mit den Selektoren, die der Browser unterstützt. jQuery verwendet intern auch querySelectorAll (oft mit QSA abgekürzt).
http://dev.w3.org/2006/webapi/selectors-api/
http://dev.w3.org/2006/webapi/selectors-api2/XPath ist viel komplizierter und diese API wird auch nicht weiter spezifiziert. document.evaluate wurde einmal in einer W3C Working Group Note im Jahr 2004 erwähnt und ist in keiner Weise mit Recommendations wie DOM 3 Core vergleichbar. Diese API ist so schrecklich und umständlich, man will sie wirklich nicht verwenden, selbst wenn man Ahnung von XPath als Sprache hat. Für mein Forum-Script habe ich vor Jahren mal mit document.evaluate gearbeitet, weil es damals von den Zielbrowsern besser unterstützt wurde als QSA und ich keine komplexe Selektor-Engine wie Sizzle einbinden wollte. Graue Vorzeit, besser schnell vergessen!
Mathias
-
Ein Hinweis auf document.querySelector() und document.querySelectorAll() wäre angebrachter.
Durch meine Unkenntnis der beiden Methoden war mir das nicht möglich - aber du bist "The Man", wenn es um JavaScript geht :)
Wieder was gelernt.
Stellt sich aber noch die Frage, wie diese Methoden vom Browser intern realisiert werden. Sind diese durch die Möglichkeiten des Browsers limitiert? Sprich wenn der Browser "CSS-seitig" kein nth-child() beherrscht, kann das die JavaScript-Methode dann auch nicht, weil hier eventuell die Selektor-Logik geteilt wird?
Im Falle von Firefox wäre das zwar z.B. unschlüssig, da die CSS-Sache in Gecko wurzelt, der JavaScript-Part aber in WhateverMonkey sitzt - aber es könnte durchaus sein könnte ist, dass man mit CSS etwas selektieren kann was mit JavaScript nicht geht oder umgekehrt.
-
Hi,
Stellt sich aber noch die Frage, wie diese Methoden vom Browser intern realisiert werden. Sind diese durch die Möglichkeiten des Browsers limitiert? Sprich wenn der Browser "CSS-seitig" kein nth-child() beherrscht, kann das die JavaScript-Methode dann auch nicht, weil hier eventuell die Selektor-Logik geteilt wird?
Schrieb Mathias doch gerade schon:
Damit lassen sich Elemente anhand von CSS-Selektoren auswählen - mit den Selektoren, die der Browser unterstützt.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Schrieb Mathias doch gerade schon:
Damit lassen sich Elemente anhand von CSS-Selektoren auswählen - mit den Selektoren, die der Browser unterstützt.
Ja, aber was ist "mit der Browser" gemeint? Leiht sich die JavaScript Engine dann die Fähigkeiten der Layout-Engine aus? oder ist "Der Browser" dann die JavaScript-Engine, die eigenständig entsprechende Selektoren unterstützen muss?
-
Leiht sich die JavaScript Engine dann die Fähigkeiten der Layout-Engine aus? oder ist "Der Browser" dann die JavaScript-Engine, die eigenständig entsprechende Selektoren unterstützen muss?
Diese Trennung gibt es nicht.
Wie gesagt, die JavaScript-Engine ist nur ein kleines Modul, was konkret JavaScript-Code ausführt. Die Objektwelt, die dem Script zur Verfügung steht, ist die Host-Umgebung. Das sind im Wesentlichen Schnittstellen zu den existierenden internen Objekten, z.B. DOM-Objekten.
Host-Objekte wie document sind ganz normal in C++ implementiert wie der Rest des Browsers auch. Die Methodenimplementierungen haben somit Zugriff auf sämtliche Klassen und Objekte des gesamten Browsers, auch auf die CSS-Engine.
Mathias
-
-
-
Hallo,
Im Falle von Firefox wäre das zwar z.B. unschlüssig, da die CSS-Sache in Gecko wurzelt, der JavaScript-Part aber in WhateverMonkey sitzt - aber es könnte durchaus sein könnte ist, dass man mit CSS etwas selektieren kann was mit JavaScript nicht geht oder umgekehrt.
SpiderMonkey ist eine ECMAScript-Engine und sonst nichts. Sie kann nur ECMAScript ausführen. Sie kennt selbst nur ECMAScript-Kernobjekte. Alles andere sind Host-Objekte, die von der Software bereitgestellt werden, die die Engine einbindet – die Host-Umgebung. Und querySelectorAll ist nur ein Binding auf die CSS-Selektor-Engine.
https://hg.mozilla.org/mozilla-central/file/85a61d68b152/content/base/src/nsGenericElement.cpp#l2252
https://hg.mozilla.org/mozilla-central/file/85a61d68b152/content/base/src/nsGenericElement.cpp#l5428Mathias
-
-
-
-
-
Mahlzeit Wayne,
Ich habe ein Problem.
Ich auch ...
Wie schaffe ich eine Funktion in einem HTML-Dokument durch eine Klasse einzufügen?
... und zwar mit dem Verständnis von dem, was genau Du willst.
"Eine Funktion in einem HTML-Dokument durch eine Klasse einfügen"? Was verstehst Du darunter?
Wie schaffe ich es nun, dass in der Klasse der Kalender angezeigt wird?
In welcher Klasse? Ich sehe da keine Klasse. Was ich sehe, ist ein <div>-Element, dass der Klasse "kalender" angehört. Was genau möchtest Du jetzt damit tun?
Dorthinein HTML-Code schreiben? Mittels einer Javascript-Funktion? Dann rufe diese einfach auf - und übergebe ihr sinnvollerweise das entsprechende DOM-Element als Funktionsargument ... dann muss diese Funktion nur noch mittels geeigneter Methoden (und
document.write()ist dafür alles andere als geeignet) z.B. entsprechende (Kind-)Elemente innerhalb des als Argument übergebenen Elements anlegen.MfG,
EKKi--
sh:( fo:| ch:? rl:( br:& n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
"Eine Funktion in einem HTML-Dokument durch eine Klasse einfügen"? Was verstehst Du darunter?
Einen Handler/Listener an eine Element mit einer Klasse anhängen.
So weit waren wir schon.
Das Problem ist: welcher Kalender ist das? Wie funktioniert er? WTF? :)
Mit jQuery/jQuery UI wäre das kein Problem:
-