Body
bearbeitet von
Hallo
> > das body-object ist null wärend der laufzeit.
> > muss das erst geschlossen werden damit man es ansteuern kann? wie <body>..</body>???
>
> es ist standardmäßig schon vorhanden - wenn man es nicht kaputt macht. Hier ein bisschen Hintergrundwissen für Dich:
>
> * [Autostart eines JavaScriptes](http://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Fader-Framework/Framework#Autostart_eines_JavaScriptes)
> * [Verschiedene Zeitlichkeiten auflösen](http://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Fader-Framework/Framework#Verschiedene_Zeitlichkeiten_aufl.C3.B6sen)
Damit er lernt, wie man sehr umständlich das Problem löst, dass man nur _eine_ Handlerfunktion als Objekteigenschaft hinterlegen kann?
Ich weiß, es klingt verrückt, aber ich glaube da gibt es noch eine _bessere_ Möglichkeit als in diesem insgesamt doch recht _antiquierten_ Tutorial:
~~~ javascript
window.addEventListener('load', foo);
window.addEventListener('load', bar);
window.addEventListener('load', baz);
// ...
~~~
Davon abgesehen, ist `body` **nicht** „standardmäßig schon vorhanden“, wie du sagst.
Zwar ist `body` kein Pflichtelement weil es obligatorisch ist, aber das bedeutet eben _nicht_, dass es vom Browser quasi _sofort_ eingefügt wird:
~~~ html
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title> Hallo Welt </title>
<script>
console.log(document.body ? true : false); // false
</script>
</head>
</html>
~~~
Die Konstruktion des Parsebaums ist Teil eines inkrementellen Prozesses und als _state machine_ implementiert, das heißt, erstdann, wenn der Parser erkennt, dass er definitiv in den _insertion mode_ „**after head**“ wechseln musst und gemäß dem Fall, dass der Tokenizer kein öffnendes `body`-Tag ausspuckt, wird `body` _automatisch ergänzt_:
~~~ html
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title> Hallo Welt </title>
</head>
<p> Hallo Welt </p>
<script>
console.log(document.body ? true : false); // true;
</script>
</html>
~~~
Das Element `p` darf in `head` nicht vorkommen, daher wechselt der Zustand zu „**after head**“ und da hier vom Tokenizer kein öffnendes `body`-Tag geliefert wurde, wird das Element entsprechend automatisch eingefügt und es geht weiter „**in body**“.
Anders aber hier:
~~~ html
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title> Hallo Welt </title>
</head>
<script>
console.log(document.body ? true : false); // false;
</script>
<p> Hallo Welt </p>
</html>
~~~
Zwar signalisiert das schließende `head`-Tag, dass wir uns nun im Zustand „**after head**“ befinden sollten, aber da kein öffnendes `body`-Tag folgt und `script` sowohl in `head` als auch in `body` vorkommen darf, muss der Parser hier eine Entscheidung treffen, ob es sich bei `script` um ein falsch plaziertes Element handelt, welches eigentlich zu `head` gehört, oder ob das Element Kind von `body` sein soll.
Im Zweifel wird `script` hier als _metadata content_ angesehen und entsprechend in den `head` verfrachtet, so dass der gleiche Code später im Browser tatsächlich so aussieht:
~~~ html
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title> Hallo Welt </title>
<script>
console.log(document.body ? true : false); // false;
</script>
</head>
<body>
<p> Hallo Welt </p>
</body>
</html>
~~~
Wenn ich in JavaScript also zum frühestmöglichen Zeitpunkt auf `body` zugreifen will, muss ich `script` direkt **nach** dem öffnenden `body`-Tag notieren, oder das Element im Script selbst erstellen…
Ersteres wäre hier in diesem konkreten Fall wahrscheinlich sogar die bessere Lösung, denn wenn wir JavaScript **nur** benutzen, um den „Platzhalter“ wieder auszublenden, wenn die Seite fertig geladen ist, in dem wir die entsprechende Klasse zuweisen, dann passiert für Besucher _ohne_ JavaScript nichts und sie bekommen den Seiteninhalt **gar nicht** zu Gesicht:
~~~ html
<!doctype html>
<html lang="de">
<head>
<!-- ... -->
</head>
<body>
<script>
var div = document.createElement('div');
document.body.appendChild(div);
window.addEventListener('load', function ( ) {
div.className = 'invisible'; // display: none;
});
</script>
<!-- ... -->
</body>
</html>
~~~
Aber wie ich schon sagte, halte ich das ganze Vorhaben ohnehin für _falsch_, denn gerade die Tatsache, dass Browser so konzipiert sind, die Elemente so schnell wie möglich zu rendern, statt mit der Anzeige zu warten bis alles geladen ist, sollte ein klares Indiz dafür sein, dass Benutzer eben **nicht gerne warten**, und nichts anderes bewirkt dieser „Startbildschirm“!
Eine gute Erklärung, warum das hier sinnvoll sein soll, habe ich jedenfalls noch nicht gelesen…
Gruß,
Orlok
> > das body-object ist null wärend der laufzeit.
> > muss das erst geschlossen werden damit man es ansteuern kann? wie <body>..</body>???
>
> es ist standardmäßig schon vorhanden - wenn man es nicht kaputt macht. Hier ein bisschen Hintergrundwissen für Dich:
>
> * [Autostart eines JavaScriptes](http://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Fader-Framework/Framework#Autostart_eines_JavaScriptes)
> * [Verschiedene Zeitlichkeiten auflösen](http://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Fader-Framework/Framework#Verschiedene_Zeitlichkeiten_aufl.C3.B6sen)
Damit er lernt, wie man sehr umständlich das Problem löst, dass man nur _eine_ Handlerfunktion als Objekteigenschaft hinterlegen kann?
Ich weiß, es klingt verrückt, aber ich glaube da gibt es noch eine _bessere_ Möglichkeit als in diesem insgesamt doch recht _antiquierten_ Tutorial:
~~~ javascript
window.addEventListener('load', foo);
window.addEventListener('load', bar);
window.addEventListener('load', baz);
// ...
~~~
Davon abgesehen, ist `body` **nicht** „standardmäßig schon vorhanden“, wie du sagst.
Zwar ist `body` kein Pflichtelement weil es obligatorisch ist, aber das bedeutet eben _nicht_, dass es vom Browser quasi _sofort_ eingefügt wird:
~~~ html
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title> Hallo Welt </title>
<script>
console.log(document.body ? true : false); // false
</script>
</head>
</html>
~~~
Die Konstruktion des Parsebaums ist Teil eines inkrementellen Prozesses und als _state machine_ implementiert, das heißt, erst
~~~ html
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title> Hallo Welt </title>
</head>
<p> Hallo Welt </p>
<script>
console.log(document.body ? true : false); // true;
</script>
</html>
~~~
Das Element `p` darf in `head` nicht vorkommen, daher wechselt der Zustand zu „**after head**“ und da hier vom Tokenizer kein öffnendes `body`-Tag geliefert wurde, wird das Element entsprechend automatisch eingefügt und es geht weiter „**in body**“.
Anders aber hier:
~~~ html
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title> Hallo Welt </title>
</head>
<script>
console.log(document.body ? true : false); // false;
</script>
<p> Hallo Welt </p>
</html>
~~~
Zwar signalisiert das schließende `head`-Tag, dass wir uns nun im Zustand „**after head**“ befinden sollten, aber da kein öffnendes `body`-Tag folgt und `script` sowohl in `head` als auch in `body` vorkommen darf, muss der Parser hier eine Entscheidung treffen, ob es sich bei `script` um ein falsch plaziertes Element handelt, welches eigentlich zu `head` gehört, oder ob das Element Kind von `body` sein soll.
Im Zweifel wird `script` hier als _metadata content_ angesehen und entsprechend in den `head` verfrachtet, so dass der gleiche Code später im Browser tatsächlich so aussieht:
~~~ html
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title> Hallo Welt </title>
<script>
console.log(document.body ? true : false); // false;
</script>
</head>
<body>
<p> Hallo Welt </p>
</body>
</html>
~~~
Wenn ich in JavaScript also zum frühestmöglichen Zeitpunkt auf `body` zugreifen will, muss ich `script` direkt **nach** dem öffnenden `body`-Tag notieren, oder das Element im Script selbst erstellen…
Ersteres wäre hier in diesem konkreten Fall wahrscheinlich sogar die bessere Lösung, denn wenn wir JavaScript **nur** benutzen, um den „Platzhalter“ wieder auszublenden, wenn die Seite fertig geladen ist, in dem wir die entsprechende Klasse zuweisen, dann passiert für Besucher _ohne_ JavaScript nichts und sie bekommen den Seiteninhalt **gar nicht** zu Gesicht:
~~~ html
<!doctype html>
<html lang="de">
<head>
<!-- ... -->
</head>
<body>
<script>
var div = document.createElement('div');
document.body.appendChild(div);
window.addEventListener('load', function ( ) {
div.className = 'invisible'; // display: none;
});
</script>
<!-- ... -->
</body>
</html>
~~~
Aber wie ich schon sagte, halte ich das ganze Vorhaben ohnehin für _falsch_, denn gerade die Tatsache, dass Browser so konzipiert sind, die Elemente so schnell wie möglich zu rendern, statt mit der Anzeige zu warten bis alles geladen ist, sollte ein klares Indiz dafür sein, dass Benutzer eben **nicht gerne warten**, und nichts anderes bewirkt dieser „Startbildschirm“!
Eine gute Erklärung, warum das hier sinnvoll sein soll, habe ich jedenfalls noch nicht gelesen…
Gruß,
Orlok
Body
bearbeitet von
Hallo
> > das body-object ist null wärend der laufzeit.
> > muss das erst geschlossen werden damit man es ansteuern kann? wie <body>..</body>???
>
> es ist standardmäßig schon vorhanden - wenn man es nicht kaputt macht. Hier ein bisschen Hintergrundwissen für Dich:
>
> * [Autostart eines JavaScriptes](http://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Fader-Framework/Framework#Autostart_eines_JavaScriptes)
> * [Verschiedene Zeitlichkeiten auflösen](http://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Fader-Framework/Framework#Verschiedene_Zeitlichkeiten_aufl.C3.B6sen)
Damit er lernt, wie man sehr umständlich das Problem löst, dass man nur _eine_ Handlerfunktion als Objekteigenschaft hinterlegen kann?
Ich weiß, es klingt verrückt, aber ich glaube da gibt es noch eine _bessere_ Möglichkeit als in diesem insgesamt doch recht _antiquierten_ Tutorial:
~~~ javascript
window.addEventListener('load', foo);
window.addEventListener('load', bar);
window.addEventListener('load', baz);
// ...
~~~
Davon abgesehen, ist `body` **nicht** „standardmäßig schon vorhanden“, wie du sagst.
Zwar ist `body` kein Pflichtelement weil es obligatorisch ist, aber das bedeutet eben _nicht_, dass es vom Browser quasi _sofort_ eingefügt wird:
~~~ html
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title> Hallo Welt </title>
<script>
console.log(document.body ? true : false); // false
</script>
</head>
</html>
~~~
Die Konstruktion des Parsebaums ist Teil eines inkrementellen Prozesses und als _state machine_ implementiert, das heißt, erst dann, wenn der Parser erkennt, dass er definitiv in den _insertion mode_ „**after head**“ wechseln muss und gemäß dem Fall, dass der Tokenizer kein öffnendes `body`-Tag ausspuckt, wird `body` _automatisch ergänzt_:
~~~ html
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title> Hallo Welt </title>
</head>
<p> Hallo Welt </p>
<script>
console.log(document.body ? true : false); // true;
</script>
</html>
~~~
Das Element `p` darf in `head` nicht vorkommen, daher wechselt der Zustand zu „**after head**“ und da hier vom Tokenizer kein öffnendes `body`-Tag geliefert wurde, wird das Element entsprechend automatisch eingefügt und es geht weiter „**in body**“.
Anders aber hier:
~~~ html
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title> Hallo Welt </title>
</head>
<script>
console.log(document.body ? true : false); // false;
</script>
<p> Hallo Welt </p>
</html>
~~~
Zwar signalisiert das schließende `head`-Tag, dass wir uns nun im Zustand „**after head**“ befinden sollten, aber da kein öffnendes `body`-Tag folgt und `script` sowohl in `head` als auch in `body` vorkommen darf, muss der Parser hier eine Entscheidung treffen, ob es sich bei `script` um ein falsch plaziertes Element handelt, welches eigentlich zu `head` gehört, oder ob das Element Kind von `body` sein soll.
Im Zweifel wird `script` hier als _metadata content_ angesehen und entsprechend in den `head` verfrachtet, so dass der gleiche Code später im Browser tatsächlich so aussieht:
~~~ html
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title> Hallo Welt </title>
<script>
console.log(document.body ? true : false); // false;
</script>
</head>
<body>
<p> Hallo Welt </p>
</body>
</html>
~~~
Wenn ich in JavaScript also zum frühestmöglichen Zeitpunkt auf `body` zugreifen will, muss ich `script` direkt **nach** dem öffnenden `body`-Tag notieren, oder das Element im Script selbst erstellen…
Ersteres wäre hier in diesem konkreten Fall wahrscheinlich sogar die bessere Lösung, denn wenn wir JavaScript **nur** benutzen, um den „Platzhalter“ wieder auszublenden, wenn die Seite fertig geladen ist, in dem wir die entsprechende Klasse zuweisen, dann passiert für Besucher _ohne_ JavaScript nichts und sie bekommen den Seiteninhalt **gar nicht** zu Gesicht:
~~~ html
<!doctype html>
<html lang="de">
<head>
<!-- ... -->
</head>
<body>
<script>
var div = document.createElement('div');
document.body.appendChild(div);
window.addEventListener('load', function ( ) {
div.className = 'invisible'; // display: none;
});
</script>
<!-- ... -->
</body>
</html>
~~~
Aber wie ich schon sagte, halte ich das ganze Vorhaben ohnehin für _falsch_, denn gerade die Tatsache, dass Browser so konzipiert sind, die Elemente so schnell wie möglich zu rendern, statt mit der Anzeige zu warten bis alles geladen ist, sollte ein klares Indiz dafür sein, dass Benutzer eben **nicht gerne warten**, und nichts anderes bewirkt dieser „Startbildschirm“!
Eine gute Erklärung, warum das hier sinnvoll sein soll, habe ich jedenfalls noch nicht gelesen…
Gruß,
Orlok