11521 sujets

JavaScript, DOM et API Web HTML5

Bonjours,
Je vien de faire un script et il ne marche pas, peu étre que je n'utilise pas createElement createTextNode corectement, mais je ne peu pas utiliser de document.write(); vu que mes pages son envoyer en temp que application xhtml

Merci de m'aider

Le code:

   <script type="text/javascript">
 
   // <![CDATA[

   <!--
 
   NavName = navigator.appName;

   NavVers = navigator.appVersion;

   Navigateur = "Votre navigateur est: " + NavName + " Sa version est: " + NavVers;

   afficher=document.createElement('div');

   afficher.appendChild(document.createTextNode(Navigateur))

   document.body.appendChild(afficher)

   //-->
 
   //  ]]>

   </script>
Si tu as donné ici ton script en entier, alors c'est normal que cela ne fonctionne pas. Pour accéder à n'importe quel élément, il faut attendre que le DOM (Document Object Model) soit chargé, en gros que la page soit chargée. Il faudrait modifier ton script en conséquence :
function navInfos() {
	var NavName = navigator.appName;
	var NavVers = navigator.appVersion;
	var Navigateur = "Votre navigateur est: " + NavName + " Sa version est: " + NavVers;
	afficher=createElement('div');
	afficher.appendChild(document.createTextNode(Navigateur));
	document.getElementsByTagName('body')[0].appendChild(afficher);
}
window.onload = navInfos;

Ton code est encapsulé dans une fonction qui est exécutée seulement en "onload" (dernière ligne), c'est-à-dire quand la page est totalement chargée (avec les images, etc.).

Par ailleurs, j'utilise ici la fonction "createElement" écrite par Simon Willison dans le lien donné précédemment (pour que cela fonctionne également sur les navigateurs n'étant pas basés sur Gecko) :
function createElement(element) {
	if (typeof document.createElementNS != 'undefined') {
		return document.createElementNS('http://www.w3.org/1999/xhtml', element);
	}
	if (typeof document.createElement != 'undefined') {
		return document.createElement(element);
	}
	return false;
}


Tu peux voir un exemple ici :
http://www.floatthatbox.com/divers/test_createElementNS.php
Modérateur
Bonsoir crocxx,

Une petite question, tout de même... Pourquoi tes pages sont-elles en application/xhtml+xml ?

En as-tu réellement l'utilité ?
Bonjour golog,
golog a écrit :
Ton code est encapsulé dans une fonction qui est exécutée seulement en "onload" (dernière ligne), c'est-à-dire quand la page est totalement chargée (avec les images, etc.).


Normalement window.onload doit agir plu tôt. C'est ce qui se passe sur tout les navigateurs sauf un devinez ???
avec les images n'est pas normal, c'est bug de IE. Je n'ai pas tout compris car je ne comprends pas aussi bien l'anglais que vous (golog et koala)
Salut chmel,

Heu non, window.onload correspond bien au chargement de la page et de tous les médias qu'elle contient (pour tous les navigateurs). D'ailleurs, venant du post que tu mets en lien :
a écrit :
The problem is that the onload event fires after all page content has loaded (including images and other binary content)

Après il existe bien une solution simple pour Mozilla (événement non standard "DOMcontentLoaded"), plus complexe pour IE... et le défaut window.onload pour les autres !
Modifié par golog (21 Sep 2006 - 23:00)
autant (ou au temps) pour moi, j'en ai encore des choses à apprendre Smiley lol . J'avait pourtant déja vu des réactions différentes mais c'était peut-être avec IE5
Merci tu ma bien aider golog Smiley cligne
J'ai compri le fonctionnement.

koala64 a écrit :
Bonsoir crocxx,

Une petite question, tout de même... Pourquoi tes pages sont-elles en application/xhtml+xml ?

En as-tu réellement l'utilité ?


Sa me sere pas vraiment en soit, car je n'utilise pas vraiment les ajout que propose le xhtml1.1 mais plutot pour m'aider a créé des pages valides, une erreur de codage peu toujour arriver, et la vu que sa bug je corrige tout de suite.
Smiley biggrin
Modérateur
Je me disais aussi... Smiley ravi

Bien, bah, dans ce cas, lis donc ce chapitre de la FAQ ainsi que les liens qui y sont associés... Tu verras que tu as fait le mauvais choix... Smiley cligne

Pour t'aider à créer des pages valides, tu as le validateur... tout simplement. Smiley smile
Je n'ai auccun probléme de patibilité, jutilise:

if(stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml")){
header("Content-Type: application/xhtml+xml; charset=UTF-8");
}
else {
header("Content-Type: text/html; charset=UTF-8");
}



if(stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml")){
echo'<?xml version="1.0" encoding="UTF-8"?>';
?>
<?php
if(stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml")){
echo'<?xml version="1.0" encoding="UTF-8"?>';
?>
<?php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<?php
} else {
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?php
}
?>


Et:

<?php
if(stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml")){
?>
		<meta http-equiv="Content-type" content="application/xhtml+xml; charset=UTF-8" />
<?php
} else {
?>
		<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<?php
}
?>


Qui me permet de n'envoyer du application xhtml/xml que pour les navigateur compatibles. Et pui bon le validateur du w3c valide qu'une page par page.
Modérateur
Salut,

Le prologue n'est utile que si l'encodage est différent d'utf-8.
Par ailleurs, je pense qu'un code comme celui qui suit serait préférable. Ce que tu me montres est faux (tu t'emmeles les pinceaux sur les ouvertures et fermetures <?php ... ?>).

<?php
if(stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml"))
{
	header("Content-Type: application/xhtml+xml; charset=utf-8");
	echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">'."\n";
	echo '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">'."\n";
	echo "\t".'<head>'."\n";
	echo "\t\t".'<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />'."\n";
}
else
{
	header("Content-Type: text/html; charset=utf-8");
	echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'."\n";
	echo '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">'."\n";
	echo "\t".'<head>'."\n";
	echo "\t\t".'<meta http-equiv="content-type" content="text/html; charset=utf-8" />'."\n";
}
?>
		<title>Exemple</title>
	</head>	
	<body>
	</body>
</html>


IE, n'étant pas servi en XHTML mais HTML, tu dois donc adapter tous tes scripts en conséquence. C'est à toi de voir mais vu que ça ne te sert à rien d'être en XHTML 1.1 mis à part satisfaire un caprice et te rendre compte qu'il n'y ait pas d'erreurs (uniquement sur les navigateurs compatibles), ça n'a aucun intérêt si ce n'est que d'alourdir inutilement ton application et rendre tes scripts plus difficiles à gérer... Le validateur sait trouver les erreurs en XHTML1.0 Strict, il n'y a qu'à cliquer sur le bouton et surtout, vu que tu n'exploites pas le potentiel de XHTML 1.1, pourquoi t'embêter à multiplier les contournements ? D'autant plus qu'en cas d'erreurs, le validateur W3C débloque sur une page servie en application/xhtml+xml ce qui t'empêche d'obtenir des indications fiables sur la nature de celles-ci. A la rigueur, il semble préférable d'avoir recours à http://www.validome.org/.

Ceci mis à part, il existe un validateur W3C multipages.

En somme, ce que tu fais ne t'aide en rien, ça ne fait que compliquer la tache.
Modifié par koala64 (24 Sep 2006 - 13:17)
Merci, surtout pour la syntaxe, je n'avez pas trouver le moyen de santé des ligne et de faire des tablulation en php depui le temp que je me suis mis, et tu vien de m'apprendre un truc qui clarifi beaucoup mon code.

Pour ce qui est du xhtml1.1 je croit que je vais l'utiliser, meme si je sait que tu a 100/100 raison, je me complique pour rien.

Merci, tu ma bien aider Smiley cligne
Modérateur
Bien. Comme tu veux mais dans ce cas, exploites-en tout le potentiel, ça te donnera une excuse... Smiley cligne
Autre astuce pour s'assurer que le DOM est chargé :

if ( document.addEventListener )
  document.addEventListener( 'DOMContentLoaded', mafonction, false );
Tu pourai me donner des explication plus présise sur addEventListener, je ne comprend pas vraiment a quoi sa sert, merci Smiley smile
crocxx a écrit :
Tu pourai me donner des explication plus présise sur addEventListener, je ne comprend pas vraiment a quoi sa sert, merci Smiley smile


Mon message est la pour enrechir la discution sur window.onload.

Cette technique est idendique a window.onload, mis à part que c'est au chargement du DOM que la fonction est lancé et non pas au chargement de la page.
AddEventListener est (comme son nom l'indique à moins que tu ne sois pas anglophone) rajouter un ecouteur d'evenement. En gros, dès que l'evenement 'DOMContentLoaded' est produit, ca va appelé la fonction 'mafonction'.
Modifié par nORKy (28 Sep 2006 - 09:27)
Attention à addEventListener comme à DOMContentLoaded. Pour le premier, il s'agit du modèle "avancé" de gestion des événements : ce n'est pas supporté par tous les navigateurs, à commencer par IE (chez Microsoft, c'est attachEvent, pas avec les mêmes propriétés, etc.). Quant à DOMContentLoaded, quoique très intéressant, c'est un événement non standard, propre à Mozilla... Bref, inutilisable seul. Pour une solution complète, il est bon d'étudier cette page :
http://dean.edwards.name/weblog/2005/09/busted/
et sa suite :
http://dean.edwards.name/weblog/2006/06/again/
oops, il est vrai que j'avais completement oublié que j'utilisais ca dans un script uniquement pour corrigé un comportement de FF. Pardonnez moi