par
devlop78 » 24 avr. 2011, 15:20
Non ... Je sais pas ce que c'est tout ça, mais on va pas créer dynamiquement un code JS.
Il faut comprendre le principe de HTML, DOM et JS. HTML te construit une multitude de noeuds dans le DOM dans "document". Mais le navigateur lit la page de haut en bas, excepté pour les images et d'autres mais qu'importent les détails. Bref, si tu affiches un <h1> et que tu mets un code JS puis un <h2>, tu verras un h1, le code s'executera, puis seulement après un h2. Le h2 ne s'est pas encore chargé lorsque le script se lance.
Je pense que le navigateur attend le chargement intégral du code HTML, car pour le parsage c'est obligatoire. Mais l'ensemble a été conçu pour réagir comme ça. Ainsi, il faut attendre que l'ensemble du DOM soit chargé pour intervenir efficacement dessus, notamment sur les éléments qui sont chargés après l'execution du script.
Parallèlement, javascript possède pas mal d'évenement qui "écoutent" le DOM. Parmi ces évenements, il y en a un qui se déclenche après le chargement du DOM, et un autre après le chargement intégral de la page. Attention que là dessus, je ne suis pas sûr, mais le DOM est chargé lors de leurs appels, ça c'est sûr.
Ainsi, ton document ressemble à:
Code : Tout sélectionner
<html>
<head>
<script>
document.onload = function () {
// Ici sera le code à executer après chargement du DOM
}
</script>
</head>
<body>
<h1></h1>
</body>
</html>
Il te faut te renseigner sur la syntaxe exacte. Tu peux ajouter explicitement un écouteur (comme tu l'as fait avec addEventListener), mais aussi implicitement avec le .load et .onload. La grosse difficulté de ces trucs là c'est tout simplement la différence de syntaxe avec les navigateurs. Et c'est là que les gentils frameworks nous sauvent la vie
Exemple avec JQuery :
<script>
$(function () {
$("h1").text ('Bonjour");
});
</script>
Ici, on enregistre une fonction anonyme qui sera lancé dès le DOM prêt. C'est jQuery qui se charge de ça.
Ensuite, tu dis de chercher les h1 et de mettre à l'intérieur le texte Bonjour. Ce texte est échappé, dans tu peux y mettre des balises, ça les affichera tel quel à l'écran du navigateur. En plus, tu n'as pas à te soucier de comment JQuery se charge de mettre ce texte (innerHTML, création d'un textnode, etc). En tous cas, il le fait très bien ^^.
Donc ensuite, facile de continuer. Attention que jQuery possède un fort polymorphisme, qui fait qu'il est capable de faire beaucoup de chose avec la même fonction : $ ou jQuery.
var monDivPapa = $("#header");
var monNouveauDiv = $("<div></div");
monNouveauDiv.attr('id','MonIdentifiant').css({'z-index':'100','opacity':'0'});
monDivPapa.append(monNouveauDiv);
monNouveuDiv.fadeIn(1000);
Voilà ... Ici je récupère un objet Jquery qui pointe vers mon header. Je crée un nouveau DIV, je lui donne un identifiant, un zindex, et je le cache. Ensuite, je le rajoute à son père, et je lui dis de se montrer progressivement sur 1 seconde.
Petite précision : utiliser une boucle de type for() pour augmenter l'opacité n'a aucun interêt. Visuellement, tu ne verras rien, et cela bloque le script sur la boucle. jQuery utilise des timers pour ça, donc en gros, des fonctions lancées à intervalles régulières.
A+
Non ... Je sais pas ce que c'est tout ça, mais on va pas créer dynamiquement un code JS.
Il faut comprendre le principe de HTML, DOM et JS. HTML te construit une multitude de noeuds dans le DOM dans "document". Mais le navigateur lit la page de haut en bas, excepté pour les images et d'autres mais qu'importent les détails. Bref, si tu affiches un <h1> et que tu mets un code JS puis un <h2>, tu verras un h1, le code s'executera, puis seulement après un h2. Le h2 ne s'est pas encore chargé lorsque le script se lance.
Je pense que le navigateur attend le chargement intégral du code HTML, car pour le parsage c'est obligatoire. Mais l'ensemble a été conçu pour réagir comme ça. Ainsi, il faut attendre que l'ensemble du DOM soit chargé pour intervenir efficacement dessus, notamment sur les éléments qui sont chargés après l'execution du script.
Parallèlement, javascript possède pas mal d'évenement qui "écoutent" le DOM. Parmi ces évenements, il y en a un qui se déclenche après le chargement du DOM, et un autre après le chargement intégral de la page. Attention que là dessus, je ne suis pas sûr, mais le DOM est chargé lors de leurs appels, ça c'est sûr.
Ainsi, ton document ressemble à:
[code]<html>
<head>
<script>
document.onload = function () {
// Ici sera le code à executer après chargement du DOM
}
</script>
</head>
<body>
<h1></h1>
</body>
</html>[/code]
Il te faut te renseigner sur la syntaxe exacte. Tu peux ajouter explicitement un écouteur (comme tu l'as fait avec addEventListener), mais aussi implicitement avec le .load et .onload. La grosse difficulté de ces trucs là c'est tout simplement la différence de syntaxe avec les navigateurs. Et c'est là que les gentils frameworks nous sauvent la vie ;)
Exemple avec JQuery :
[quote]<script>
$(function () {
$("h1").text ('Bonjour");
});
</script>[/quote]
Ici, on enregistre une fonction anonyme qui sera lancé dès le DOM prêt. C'est jQuery qui se charge de ça.
Ensuite, tu dis de chercher les h1 et de mettre à l'intérieur le texte Bonjour. Ce texte est échappé, dans tu peux y mettre des balises, ça les affichera tel quel à l'écran du navigateur. En plus, tu n'as pas à te soucier de comment JQuery se charge de mettre ce texte (innerHTML, création d'un textnode, etc). En tous cas, il le fait très bien ^^.
Donc ensuite, facile de continuer. Attention que jQuery possède un fort polymorphisme, qui fait qu'il est capable de faire beaucoup de chose avec la même fonction : $ ou jQuery.
[quote]var monDivPapa = $("#header");
var monNouveauDiv = $("<div></div");
monNouveauDiv.attr('id','MonIdentifiant').css({'z-index':'100','opacity':'0'});
monDivPapa.append(monNouveauDiv);
monNouveuDiv.fadeIn(1000);[/quote]
Voilà ... Ici je récupère un objet Jquery qui pointe vers mon header. Je crée un nouveau DIV, je lui donne un identifiant, un zindex, et je le cache. Ensuite, je le rajoute à son père, et je lui dis de se montrer progressivement sur 1 seconde.
Petite précision : utiliser une boucle de type for() pour augmenter l'opacité n'a aucun interêt. Visuellement, tu ne verras rien, et cela bloque le script sur la boucle. jQuery utilise des timers pour ça, donc en gros, des fonctions lancées à intervalles régulières.
A+
