11550 sujets

JavaScript, DOM et API Web HTML5

Fonction Affichage OBjet Javascript!

Bonjour

je souhaite ecrire une fonction qui dans un objet targetlinks (un document source et ses liens connexes) récupere les propriétés (source_url, source_title, source_date, source_category, target_title, target_date) et les affiches dans un tableau deux colonnes ou chacque rangée correspond un objet targetlink la 1ere cellule contient le doc source et la second ele doc cible...


document.getElementById('LinksTarget');
document.write('LinksTarget.URL');
document.write('LinksTarget.Titre');
document.write('LinksTarget.Date');
document.write('LinksTarget.Zone_Cible[]');
document.write('LinksTarget.Titre');
document.write('LinksTarget.Date');


Bref si vous aviez à créer un objet javascrit avec n propriétés comment feriez vous pour afficher celle-ci dans une page html

objet = personne avec pour proprités:sexe, age, ville, telephone, profession, diplome par exemple?
Modérateur
Salut,

ben...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />

		<title>Affichage des propriétés d'un objet</title>

		<script type="text/javascript"><!--

(function() {

var oO =
{
	'moi':
	{
		'sexe': 'masculin',
		'age': '29 ans',
		'ville': 'Paris',
		'telephone': '06 et des bananes',
		'professions': 'dessinateur projeteur et intégrateur xhtml, css, js, php, ajax, etc...',
		'diplome': 'DUT Génie thermique et Energie'
	},

	connect: function(oElem, sEvType, fn, bCapture)
	{
		return document.addEventListener ?
			oElem.addEventListener(sEvType, fn, bCapture):
			oElem.attachEvent ?
				oElem.attachEvent('on' + sEvType, fn):
				false;
	},

	init: function()
	{
		var sProp, oP, oTxt;

		for(sProp in oO['moi'])
		{
			oP = document.createElement('p');
			oTxt = document.createTextNode(sProp + ' : ' + oO['moi'][sProp]);

			oP.appendChild(oTxt);
			document.body.appendChild(oP);
		}

		return true;
	}
};

oO.connect(window, 'load', oO.init, false);

})();

		//--></script>
	</head>
	<body>
	</body>
</html>

Modifié par koala64 (17 Jul 2007 - 13:52)
Merci est ce que les deux derniers blocs du code reste inchangés si par exemple l'objet etait intialisé ailleurs c-a-d que les valeurs sont récupérés dan,s une base de données ?
Modérateur
Non. Ce n'est qu'un exemple... Smiley smile

Si tu comptes récupérer l'objet tel quel d'une bdd, il faut un script php qui surveille les requêtes (post), fasse une requête sur la bdd pour récupérer les données et qui génère (et renvoie) cet objet (format JSON ici).

Dans la partie JS, tu dois avoir une partie Ajax qui fait la demande de l'objet (post) et qui affiche la réponse. En somme, la méthode oO.init n'a plus grand chose à voir (dans un cas réel, mieux vaut, en plus, qu'elle puisse accepter différents objets) et il y a toutes les méthodes liées à Ajax à ajouter.

Si ça ne te parle pas, le mieux serait de commencer par bucher sur un tuto Ajax. Smiley cligne
koala64 a écrit :
Non. Ce n'est qu'un exemple... Smiley smile

Si tu comptes récupérer l'objet tel quel d'une bdd, il faut un script php qui surveille les requêtes (post), fasse une requête sur la bdd pour récupérer les données et qui génère (et renvoie) cet objet (format JSON ici).

Dans la partie JS, tu dois avoir une partie Ajax qui fait la demande de l'objet (post) et qui affiche la réponse. En somme, la méthode oO.init n'a plus grand chose à voir (dans un cas réel, mieux vaut, en plus, qu'elle puisse accepter différents objets) et il y a toutes les méthodes liées à Ajax à ajouter.

Si ça ne te parle pas, le mieux serait de commencer par bucher sur un tuto Ajax. Smiley cligne


en effet en fait mon maitre de stage dans son grand art de la gestion de projet vient de me spécifier que je vais devoir d'abord ecrire une autre fonction JS qui à partir d'un tableau récupéré en php dans mysql va devoir générer un objet javascript notation JSOn evidemment....

mais effectivement je vais lire le tuto ajax que tu viens d eme filer!
Modérateur
olk1free a écrit :
en effet en fait mon maitre de stage dans son grand art de la gestion de projet vient de me spécifier que je vais devoir d'abord ecrire une autre fonction JS qui à partir d'un tableau récupéré en php dans mysql va devoir générer un objet javascript notation JSOn evidemment....
On peut faire ainsi oui mais PHP aussi sait manier JSON donc c'est selon tes affinités...
koala64 a écrit :
On peut faire ainsi oui mais PHP aussi sait manier JSON donc c'est selon tes affinités...
je fais selon les affinités de la maitrise d'ouvrage effectivement j'avais cru comprendre que php sait maniere du json et donc à ce titre il y a une etape en trop mais lui en fait veut créer une appli dont le code php est completement caché à l'utilisateur en fait si j'ai bien compris sont délire... le seul moment ou le php interagit avec la bdd je crois que c'est quand y'a clairement un insert ou un update nécessaire si non on reste tout se passe en javascript légerement ajaxifié... enfin bref c'est un galere comme stage... aucune spec...
c'est koi le pb ici? j'ai testé ça en inline dans un fichier html et rien n'apparait à l'écran!

<script language="JavaScript">
var TagLink = new Object;
SmartLinks.url = "http://www.yahoo.fr";
SmartLinks.titre = "Yahoo.fr";
SmartLinks.date = "20 juillet 2007";
SmartLinks.category = "news";

function afficher()
{
var Objet=document.getElementById('TagLink');
 
var Props=new Array('url', 'titre', 'date', 'category') 
var AffichgeTableau=document.createElement('table') 
var BodyTableau=document.createElement('tbody') 

	for (i=0;i<Props.length;i++)
	{
		var ligne=document.createElement('tr')
    	for(j=0;j<2;j++)
    	{
         var cellule=document.createElement('td')
         cellule.innerHTML=(j==0)?Props[i]:eval('Objet.'+Props[i]);
         ligne.appendChild(cellule)
   	}
   	monBody.appendChild(ligne)
   }
montableau.appendChild(BodyTableau)
document.body.appendChild(AffichgeTableau)
}
</script>
[/i][/i]
Modifié par olk1free (19 Jul 2007 - 12:31)
Sujet clos
Aller à